www.msyz555.com怎样经过javascript从一组DOM中获取数据,然后整理成自己想要的数据

如今已知一组DOM构造,想要从这组DOM中拿出相干的数据,偏重新整分解一个自己想要的数据,而这个DOM的构造相对来说不是那么标准。
代码如下:

<div id="box">
    <ol>
        <li class="list">1111</li>
        <li class="list">2222</li>
        <li>
            <ol>
                <li class="list">2222-11</li>
                <li class="list">2222-22</li>
            </ol>
        </li>
        <li class="list">3333</li>
        <li class="list">4444</li>
        <li>
            <ol>
                <li class="list">4444-11</li>
                <li class="list">4444-22</li>
                <li>
                    <ol>
                        <li class="list">4444-22-11</li>
                        <li class="list">4444-22-22</li>
                        <li class="list">4444-22-33</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li class="list">5555</li>
    </ol>
</div>

主体代码是一个有序列表ol,需求找到ol下统统的li下面的数据而ol下面的第一层li.list,指的是第一级目次,跟在li.list后面没有class的li,则是后面一个li.list的子集,子集可以包括二级,也可以包括三级,也可以就只要一级。

终极盼望经过下面的DOM分析出来的数据如下:

/*
    如今dom构造是下面如许的,并且这个构造是我不克不及改动的
    然后如今我需求把下面dom里面的数据取出来,重构成下面如许的款式
    大致意思是如许的: box 下面的第一层ol里面的li.list是第一级的栏目,假如li.list后面随着的li没有class,那么这个li便是后面li.list的子集,需求包到上一级child里

    text: 代表以后li的内容
    child: 代表以后li有没有子集,child是一个数组
*/

var arrlist = [
     {
         text: 1111,
         child: null
     },
     {
         text: 2222,
         child: [
             {
                 text: 2222-11,
                 child: null
             },
             {
                 text: 2222-22,
                 child: null
             }
         ]
     },
     {
         text: 3333,
         child: null
     },
     {
         text: 4444,
         child: [
             {
                 text: 4444-11,
                 child: null
             },
             {
                 text: 4444-22,
                 child: [
                     {
                         text: 4444-22-11,
                         child: null
                     },
                     {
                         text: 4444-22-22,
                         child: null
                     },
                     {
                         text: 4444-22-33,
                         child: null
                     }
                 ]
             }
         ]
     },
     {
         text: 5555,
         child: null
     }
];

主要是自己才疏学浅,真实是没有什么思路了,以是才来这告急广大网友,盼望各位不惜见示。我并不想做伸手党,只是真的无法了,没有半点思路,盼望大家可以谅解,可以帮忙一下我,谢谢!

泻药,我看了一下,为了快一点就用jquery来写了,大约思路从代码可以看出。

$function{
        //顶级的box下的ol
        var boxOl = $#box>ol;

        console.loggetChildrenboxOl;
        //主要办法
        function getChildrenfather{
                //存储东西数组
                var artList = [];
                var listItem;
                //起首失掉直接子元素
                var li = father.childrenli;
                //遍历,当拥有list的时分,就天生一个{text:.children:null}的东西
                li.eachfunctioni{
                        listItem = {};
                     var that = $this;
                        ifthat.hasClasslist{
                                listItem[text] = that.text;
                                listItem[child] = null;
                        }else{//没有list,阐明是嵌套层
                //由于前一个list便是它的父层,以是我们参加过数组的就要把它赶出来,组装一个精确的
                                artList.pop;
                                listItem[text] = that.prev.list.text;
                                //递归获取该层下的子元素的child
                                listItem[child] = getChildrenthat.childrenol;
                        }
                        //推入后果数组中
                        artList.pushlistItem;
                };
                //前往
                return artList;
        }
};

demo:>> http://runjs.cn/detail/1iovvaxa

这个用for-in循环来做吧,思路是将li全部获取到,然后遍历它们,对child中断判别,假如为空,则进入下一个li,假如另有内容,则递归下面的办法。
代码如下:

function analyse list  {  //传入一个li的数组
    var res = [];
    for  var i in list  {
        var data = {};  //这是每一个li对应的东西
        data.text = i.innerText;
        if  i.document.getElementsByTagName"ol"  {  //这里也可以用i.children来中断判别能否另有子节点,但关于题主的页面构造,就直接判别能否有ol吧
            data.child = analyse i.getELementsByTagName"ol"[0].getElementsByTagName"li";  //这里用原生写出来比较长,真实便是在分析到以后li下另有子节点后,又获取这个li下的统统li
        } else {
            data.child = null;
            res.push[data]; 
        }
    }
    return res; //最后将数组前往
}

以上办法即满意题主需求。

(看完/读完)这篇文章有何感想! www.msyz555.com的分享…

发表评论

姓名 *
电子邮件 *
站点