如何在jquery中对嵌套的li进行编号

Question

我尝试对嵌套列表中的所有链接进行编号，该编号应位于“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”又。有什么想法可以解决这个问题吗？

Answer 1

以下内容应该执行您想要的操作：

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

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

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

.index() 方法返回元素相对于其同级元素的位置元素，其中 - 作为 .each()index 参数> 是元素在 jQuery 集合中的位置。

Answer 2

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

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

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

查看实际操作（该示例更改 HTML 以使结果可见）。