1

这是此内容的延续： 如何递归地为列表中的每个项目分配一个唯一 ID？

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

但我注意到我在这里有一个问题：

http://jsfiddle.net/eloiterman/jCup4/5/

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。

4

2 回答 2

1

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

$("li").each(function(idx){
    $(this).attr("id","sitemap-item-" + idx);           
});
于 2013-08-21T15:01:52.257 回答
1

您实际上没有任何递归，因此您只是循环仅 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/

于 2013-08-21T15:12:17.413 回答