0

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は0class depth-0、 item の場合は class 、 has の場合はparent_id (child item)class である必要がdepth-1あります(sub child item) depth-2。誰でもこれを行う方法を教えてくれますか?

4

2 に答える 2

3

この方法を試してください：

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です...例と同様です。

depths 配列を反復処理して、メニュー項目を生成します...

于 2013-05-27T16:27:27.673 に答える
1

loxxi の回答を実装すると、次のように実行できます。

$.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を参照してください

于 2013-05-27T17:06:39.490 に答える