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正在查找li后代的所有ul.mainNav;哪个包含与选择器ul.subNav li匹配的元素。这就是为什么我从我的例子中省略了ul.subNav li选择器。如果您想仅定位ul.mainNav元素的子，那么您应该使用child selector而不是descendant：

$("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传递给你的回调函数。

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

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

2 个答案: