jquery - 如何在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 正在寻找所有 li 是 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 集合中的位置。