如何通过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
}
];
主要是自己才疏学浅,实在是没有什么思路了,所以才来这求助广大网友,希望各位不吝赐教。我并不想做伸手党,只是真的无奈了,没有半点思路,希望大家能够谅解,能够帮助一下我,谢谢!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这个用for-in循环来做吧,思路是将li全部获取到,然后遍历它们,对child进行判断,如果为空,则进入下一个li,如果还有内容,则递归上面的方法。
代码如下:
以上方法即满足题主需求。
泻药,我看了一下,为了快一点就用jquery来写了,大概思路从代码可以看出。
demo:>> http://runjs.cn/detail/1iovvaxa