在jQuery可排序列表中为每个<li>(包括嵌套)创建ID

Question

我有一个带有嵌套LI项的可排序列表.我正在寻找为小组中的ID每个人创建一个LI.

例.如果我有这个:

<li class="main"> Cat 0
    <ul class="subCat">
        <li>Subcat 0
            <ul class="subCat">
                <li>Sub-Subcat 0
                    <ul class="subCat"></ul>
                </li>
            </ul>
        </li>
        <li>Subcat 1</li>
    </ul>
</li>

好的,那些ul.subCat可以嵌套其他li物品.我想创建一个函数来ID向li元素及其li子元素添加s .每次订单更改都会调用此函数.

结果应该是这样的:

<li class="main" id="cat_0"> Cat 0
    <ul class="subCat">
        <li id="cat_0_0">Subcat 0
            <ul class="subCat">
                <li id="cat_0_0_0">Sub-Subcat 0
                    <ul class="subCat"></ul>
                </li>
            </ul>
        </li>
        <li id="cat_0_1">Subcat 1</li>
    </ul>
</li>

并且,对于每个li.main元素重复故事达到4级(0到3).

我的实际代码就是这个:

// level 0
target = $('#ulMenu >li');
for( i=0; i<=target.length-1; i++ ){
    target.eq(i).attr('id', 'cat_' + i).addClass('main');
}

// level 1
//------------------------------------------------------------------
$('#ulMenu >li.main').each(function(){

    target = $(this).children('ul').children('li');
    for( i=0; i<=target.length-1; i++ ){
        father = target.eq(i).parent('ul').parent('li').attr('id').split('_')[1];
        target.eq(i).attr('id', 'cat_' + padre + '_' + i);
    }

我必须知道如何将IDs 添加到其余元素中.我正在尝试,但我找不到解决方案.

Answer 1

这是一个递归解决方案，可以工作到您想要的任何深度：

\n\n

function menuID(el, base) {\n    base = base || \'cat\';\n    $(el).filter(\'li\').each(function(i) {\n        this.id = base + \'_\' + i;\n        menuID($(this).children(\'ul\').children(\'li\'), this.id);\n    });\n};\n\nmenuID(\'.main\');\xe2\x80\x8b\n

\n\n

请参阅http://jsfiddle.net/alnitak/XhnYa/

\n\n

或者，这里有一个 jQuery 插件版本：

\n\n

(function($) {\n    $.fn.menuID = function(base) {\n        base = base || \'cat\';\n        this.filter(\'li\').each(function(i) {\n            this.id = base + \'_\' + i;\n            $(this).children(\'ul\').children(\'li\').menuID(this.id);\n        });\n    };\n})(jQuery);\n\n$(\'.main\').menuID();\n

\n\n

请参阅http://jsfiddle.net/alnitak/5hkQU/

\n