如何编号嵌套的li'；jquery中的s

我尝试对嵌套列表中的所有链接进行编号，编号应位于“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>

---

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

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

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

重要的细节是，您不想自己尝试计算

索引

，而只是使用

每个

传递到回调函数中的内容

---

（示例更改HTML以使结果可见）。

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

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

重要的细节是，您不想自己尝试计算

索引

，而只是使用

每个

传递到回调函数中的内容

---

（该示例更改HTML以使结果可见）。

以下操作应满足您的要求：

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

选择器

ul.mainNav li

正在查找属于

ul.mainNav

的后代的所有

li

s；其中包括选择器匹配的元素

ul.subNav li

。这就是为什么我在示例中省略了

ul.subNav li

选择器。如果您只想针对

ul.mainNav

元素的子元素，则应使用，而不是：

---

您使用的方法返回元素相对于其同级元素的位置，其中提供的

索引

参数是元素在jQuery集合中的位置。

以下操作应满足您的要求：

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

选择器

ul.mainNav li

正在查找属于

ul.mainNav

的后代的所有

li

s；其中包括选择器匹配的元素

ul.subNav li

。这就是为什么我在示例中省略了

ul.subNav li

选择器。如果您只想针对

ul.mainNav

元素的子元素，则应使用，而不是：

您使用的方法返回元素相对于其同级元素的位置，其中提供的

index

参数是元素在jQuery集合中的位置