我需要根据parent_id添加深度类。
Json 数据:
[
{"id":1,"name":"one","parent_id":0},
{"id":2,"name":"two","parent_id":0},
{"id":3,"name":"three","parent_id":0},
{"id":4,"name":"four","parent_id":0},
{"id":5,"name":"five","parent_id":0},
{"id":6,"name":"one","parent_id":2},
{"id":7,"name":"two","parent_id":6},
{"id":8,"name":"three","parent_id":6},
{"id":9,"name":"four","parent_id":8},
{"id":10,"name":"five","parent_id":8},
]
结果应该是:
<ul class="menu">
<li class="depth-0 menu-item-1"><li>
<li class="depth-0 menu-item-2"><li>
<li class="depth-1 menu-item-6"><li>
<li class="depth-2 menu-item-8"><li>
<li class="depth-3 menu-item-9"><li>
<li class="depth-3 menu-item-10"><li>
<li class="depth-2 menu-item-7"><li>
<li class="depth-0 menu-item-3"><li>
<li class="depth-0 menu-item-4"><li>
<li class="depth-0 menu-item-5"><li>
</ul>
我已经尝试过
$.each(data, function(i, item) {
if(item.parent_id > 0){
$(this).addClass('depth-1');
}
});
如果项目parent_id
为0
,则类应为深度-0
(如果项目具有parent_id
) (子项目)
那么类应该是 深度-1
并且如果有 (子子项目)
深度-2
。任何人都可以指导我如何做到这一点?
最佳答案
试试这个方法:
var depths = [];
$.each(data, function(i, item) {
depths[item.id] = (depths[item.parent_id] || 0) + 1;
});
这将为您提供一个具有深度的数组(从 1 开始)
对于数据
var data = [
{"id":1,"name":"one","parent_id":0},
{"id":2,"name":"two","parent_id":0},
{"id":3,"name":"three","parent_id":0},
{"id":4,"name":"four","parent_id":0},
{"id":5,"name":"five","parent_id":0},
{"id":6,"name":"one","parent_id":2},
{"id":7,"name":"two","parent_id":6},
{"id":8,"name":"three","parent_id":6},
{"id":9,"name":"four","parent_id":8},
{"id":10,"name":"five","parent_id":8},
];
所以深度数组将是:
[undefined, 1, 1, 1, 1, 1, 2, 3, 3, 4, 4]
即菜单项 1 的深度为 1,菜单项 6 的深度为 2...与您的示例类似。
现在迭代深度数组并生成菜单项...
关于javascript - 需要根据parent id添加深度类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16776969/