Как нумеровать вложенные li в jquery - PullRequest
Новая
       26

Как нумеровать вложенные li в jquery

1 голос
/ 09 сентября 2011

Я пытаюсь сделать нумерацию всех ссылок во вложенном списке, номер должен идти в атрибуте "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". Любые идеи, чтобы решить это?

Ответы [ 2 ]

4 голосов
/ 09 сентября 2011

Следующее должно делать то, что вы хотите: 

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

Селектор ul.mainNav li находит все li s, которые являются потомками ul.mainNav;который включает элементы, соответствующие селектору ul.subNav li.Вот почему я опустил селектор ul.subNav li из моего примера.Если вы хотите, чтобы only предназначался для children элемента ul.mainNav, тогда вы должны использовать дочерний селектор вместо потомка : 

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

Используемый вами метод .index() возвращает позицию элемента относительно его родственных элементов, где-как параметр index, предоставленный .each() - позиция элемента в коллекции jQuery.

3 голосов
/ 09 сентября 2011

Простого изменения будет достаточно: 

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

Важным моментом является то, что вы не хотите пытаться вычислить index самостоятельно, а просто используете то, что each передает в вашу функцию обратного вызова.

См. Это в действии (пример изменяет HTML, чтобы результаты были видны).

...