Comment numéro li imbriqué dans jquery

Question

J'essaie faire nombre tous les liens dans une liste imbriquée, le nombre devrait aller dans l'attribut « data-nav-non », le résultat devrait être comme ceci:

<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> 

J'ai essayé ceci:

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

Works, mais dans le deuxième niveau de la liste le numéro commence par « 0 » à nouveau. Des idées pour résoudre ça?

Answer 1

qui suit devrait faire ce que vous voulez:

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

Le sélecteur ul.mainNav li est de trouver tous les li s qui sont des descendants de ul.mainNav; comprend les éléments correspondant au sélecteur ul.subNav li. C'est pourquoi j'ai omis le sélecteur ul.subNav li de mon exemple. Si vous voulez seulement cibler les enfants de l'élément ul.mainNav, vous devez utiliser le child selector au lieu du descendant:

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

La méthode .index() vous utilisez renvoie la position de l'élément par rapport à sa les éléments frères, où le paramètre index fourni par .each() correspond à la position de l'élément dans la collection jQuery.

Answer 2

Un simple changement sera assez:

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

Le détail important est que vous ne voulez pas essayer de calculer la index vous, mais il suffit d'utiliser ce que each passe dans votre fonction de rappel.

See it in action (l'exemple modifie le code HTML pour rendre les résultats visibles).