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

Question

我有一个可排序的列表，其中包含嵌套的LI项目。我正在寻找为组中的每个LI创建一个ID。

例。如果我有这个：

<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项目。我想创建一个函数来向li元素及其li子元素添加 ID 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);
    }

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

Answer 1

这是一个递

归解决方案，可以适用于您想要的任何深度：

function menuID(el, base) {
    base = base || 'cat';
    $(el).filter('li').each(function(i) {
        this.id = base + '_' + i;
        menuID($(this).children('ul').children('li'), this.id);
    });
};
menuID('.main');​

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

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

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

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

Answer 2

这样的事情应该可以做到...

$('#ulMenu').children('li').each(function(cat) {
    $(this).attr('id', 'cat_' + cat).children('ul').children('li').each(function(sCat) {
        $(this).attr('id', 'cat_' + cat + '_' + sCat).children('ul').children('li').each(function(ssCat) {
            $(this).attr('id', 'cat_' + cat + '_' + sCat + '_' + ssCat);
        });
    });
});​

示例：http://jsfiddle.net/6YR5p/2/