需要根据父id添加深度类
需要根据父id添加深度类
提问于 2013-05-27 16:10:11
我需要根据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');
}
});如果item parent_id是0，那么类应该是depth-0，如果item有parent_id (child item)，那么类应该是depth-1，if有(sub child item) depth-2。任何人都能指引我怎么做？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-05-27 16:27:27
试着这样做：
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。类似于你的例子。
现在遍历深度数组&生成菜单项.
Stack Overflow用户
发布于 2013-05-27 17:06:39
实现洛西的答案--你可以这样做：
$.each(data, function(i, item) {
depthsTemp[item.id] = (depthsTemp[item.parent_id] || 0) + 1;
});
depths = $.map(depthsTemp, function(item) {
return --item;
}).splice(1);
function buildList(depthList) {
var html = '<ul class="menu">\n';
for (var i = 0; i < depthList.length; i++) {
html += '<li class="depth-' + depthList[i] + ' menu-item-' + (i + 1) + '"></li>\n';
}
html += '</ul>';
return html;
}参见此文件的工作JSFiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16776969
复制相关文章
相似问题
腾讯云开发者
