Question

这是对此的延续： How do I recursively assign each item in a list an unique ID?

当我想在<li>级别应用它们时，我想出了部分答案 http://jsfiddle.net/UvQmC/14/

但我注意到我有一个问题：

HTML：

<html><head></head>
    <body>
    <div class="wayfinder"></div>
    <!-- dynamically add links to -->
    <div class="fsscroller">
    <ul>
        <li><span class="name">Start state</span>

            <ul class="show">
                <li><span class="name">Superstate 1</span>

                    <ul class="show">
                        <li><span class="name">Start Cycle</span>

                            <ul class="show">
                                <li><span class="name">task 1 </span>

                                </li>
                                <li><span class="name">task 2 </span>

                                </li>
                                <li><span class="name">task 3 </span>

                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
      <li><span class="name">X-fer to dal</span></li>
      <li><span class="name">another task</span></li>
      <li><span class="name">Yet another task</span></li>
      <li><span class="name">Yet even another task</span></li>
      <li><span class="name">enough already!</span></li>


        <li><span class="name">end cycle</span>

        </li>
    </ul>
    </div>
    </body></html>

脚本：

        $("div > ul > li").each(function(idx){
            $(this).attr("id","sitemap-item-"+ ++idx);
            $(this).find("> ul > li").each(function(idx2){
                $(this).attr("id","sitemap-item-"+ idx + "-" + ++idx2);            
            });            
        });

错误是它不会搜索dom中的所有嵌套列表项。在我的例子中。问题是我可以按任意顺序包含列表项的任意数量的嵌套ul，具体取决于它们的加载方式。

Answer 1

为什么不保持选择器平坦，如下所示，idx变量将自动增加，因为每个方法找到下一个列表元素：

$("li").each(function(idx){
    $(this).attr("id","sitemap-item-" + idx);           
});

Answer 2

您实际上没有任何递归，所以您只需循环两个级别。你可以这样做：

function addIDs($els, base){
    $els.each(function(i){
        var $this = $(this);
        var id = base + "-" + i;

        $this.attr("id", id);
        addIDs($this.find("> ul > li"), id);
    });
}

addIDs($("div > ul > li"), "sitemap-item");

http://jsfiddle.net/jCup4/10/

多级递归ID添加到列表中

2 个答案: