如何在jquery中为嵌套的li编号答案

【问题标题】：How to number nested li's in jquery如何在jquery中为嵌套的li编号
【发布时间】：2011-11-13 15:00:25
【问题描述】：

我尝试对嵌套列表中的所有链接进行编号，编号应该放在“data-nav-no”属性中，结果应该是这样的：

<ul class="mainNav">
    <li><a href="#startseite" data-nav-no="1">Startseite</a></li>
    <li><a href="#ueber-uns" data-nav-no="2">Über uns</a></li>
    <li><a href="#leistungen" data-nav-no="3">Leistungen</a>
        <ul class="subNav">
            <li><a href="#langfristige-unterstuetzung" data-nav-no="4">Langfristige Unterstützung</a></li>
            <li><a href="#punktuelle-unterstuetzung" data-nav-no="5">Punktuelle Unterstützung</a></li>
        </ul>
    </li>
    <li><a href="#referenzen" data-nav-no="6">Referenzen</a></li>
    <li><a href="#news" data-nav-no="7">News</a></li>
    <li><a href="#kontakt" data-nav-no="8">Kontakt</a></li>
</ul>

我试过了：

$("ul.mainNav li, ul.subNav li").each(function() {
    var index = $(this).index();    
    $(this).children("a").attr('data-nav-no',index);
});

有效，但在第二个列表级别中，数字再次以“0”开头。有什么想法可以解决吗？

【问题讨论】：

标签： jquery html counter nested-lists html-lists

【解决方案1】：

以下应该做你想要的：

$("ul.mainNav li").each(function(i) {
    $(this).children("a").attr('data-nav-no',i)
});

选择器ul.mainNav li 正在查找所有lis 是ul.mainNav 的后代；其中包括选择器ul.subNav li匹配的元素。这就是为什么我在示例中省略了ul.subNav li 选择器。如果你想仅定位ul.mainNav元素的children，那么你应该使用child selector而不是descendant：

$("ul.mainNav > li, ul.subNav > li").each(function(i) {
    $(this).children("a").attr('data-nav-no',i)
});

您使用的.index() 方法返回元素相对于其兄弟元素的位置，其中.each() 提供的index 参数是该元素在jQuery 集合中的位置。

【讨论】：

【解决方案2】：

一个简单的改变就足够了：

$("ul.mainNav, ul.subNav").find("li").each(function(index) {
    $(this).children("a").attr('data-nav-no',index)
});

重要的细节是您不想尝试自己计算index，而只需使用each 传递给您的回调函数的内容。

See it in action（该示例更改 HTML 以使结果可见）。

【讨论】：