JS遍历2层DOM装入数组转JSON【实例】

大 | 中 | 小
[不指定 2015/06/12 15:42 | by 刘新修 ]

 JS遍历2层DOM装入数组转JSON【实例】

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <style>  
  7. *{ margin:0; padding:0;}  
  8. body{ color:#333; font-family:'Microsoft Yahei'; font-size:16px;}  
  9. ul,li{ list-style:none; line-height:30px;}  
  10. .conbox{ padding:10px;}  
  11. .conbox .selected{ color:#CC0033}  
  12. .conbox .lis span{ padding:0 5px;}  
  13. </style>  
  14. </head>  
  15. <body arrData="111,222,333,444,555,666">  
  16. <div class="conbox">  
  17.     <ul class="lisbox">  
  18.         <li data-qId="11" n="aaa" class="lis selected"><span class="on">111c</span><span class="on">222c</span><span class="on">333c</span></li>  
  19.         <li data-qId="22" n="bbb" class="lis">bbb</li>  
  20.         <li data-qId="33" n="ccc" class="lis selected"><span class="on">111a</span><span class="on">222a</span><span class="on">333a</span></li>  
  21.         <li data-qId="44" n="ddd" class="lis">ddd</li>  
  22.         <li data-qId="55" n="eee" class="lis selected"><span class="on">111b</span><span class="on">222b</span><span class="on">333b</span></li>  
  23.         <li data-qId="66" n="fff" class="lis">fff</li>  
  24.     </ul>  
  25. </div>  
  26. <div id="submitBtn" style=" width:100%; height:50px; line-height:50px; text-align:center; color:#fff; background:#CC0000">点击事件</div>  
  27. </body>  
  28. <script type="text/javascript" src="http://code.liuxinxiu.com/lib/zepto/zepto-1.1.6.js"></script>  
  29. <script type="text/javascript">  
  30. $("#submitBtn").on("click",function(){  
  31.     /*********  声明变量获取节点 ***************/  
  32.     var qList=$(".lisbox li.selected"),qLen=qList.length,arr=[];  
  33.     /*********  循环第一层问题 ***********/  
  34.     for(var i=0;i<qLen;i++){  
  35.         /**** var $anList=$qList.eq(i).find("[name=an" + i + "]:checked"),subArr=[]; ****/  
  36.         var anList=qList.eq(i).find(".on"),subArr=[];  
  37.         var qid=qList.eq(i).attr("data-qId");  
  38.         /*****  循环第二层答案  **********/  
  39.         for(var key=0;key<anList.length;key++){  
  40.             subArr.push(anList.eq(key).text());  
  41.         }  
  42.         /*****  添加到整体数组 ************/  
  43.         arr.push({Question:qid,Answer:subArr});  
  44.     }  
  45.     /***** 转化成JSON结构字符串 *******/  
  46.     var subArrst=JSON.stringify(subArr);  
  47.     var jsondata=JSON.stringify(arr);  
  48.     /***** 使用replace替换"号为空、可全部 ******/  
  49.     var _subArrst=subArrst.replace(/"/g,"");  
  50.     var _datalist=jsondata.replace(/"/g,"");  
  51.     var _dataJson={guId:111222,eventId:11,plat:5,datalist:subArrst};  
  52.     alert(_datalist)  
  53. });  
  54. </script>  
  55. </html>  

 

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4284)