jQuery: addClass pour chaque élément .next() d'une liste

Question

Im essayant d'utiliser jQuery pour ajouter une classe différente pour chaque élément Span, en utilisant .next() Ceci est le javascript:

<script type="text/javascript"> 

    $(function() { 
     $("a", "div.top_menu").addClass("ui-icons-custom"); 

     $("span.ui-icon:first", "ul.top_menu_list").addClass("ui-icon-pencil") 
      .next().addClass("ui-icon-comment") 
      .next().addClass("ui-icon-key"); 
    }); 

</script> 

Et c'est le Im HTML essayer de le faire fonctionner:

<div class="top_menu ui-state-default-custom"> 
       <ul class="ui-widget top_menu_list"> 

        <li> 
         <span style="float: left;" class="ui-icon-text-custom"><span style="float: left;" class="ui-icon"></span> 
          <a href="test">Registrarse</a> 
         </span> 
        </li> 
        <li> 
         <span style="float: left;" class="ui-icon-text-custom"><span style="float: left;" class="ui-icon"></span> 
          <a href="test1">Agregar un anuncio</a> 
         </span> 
        </li> 
        <li> 
         <span style="float: left;" class="ui-icon-text-custom"><span style="float: left;" class="ui-icon"></span> 
          <a href="test2">Ingresar (Login)</a> 
         </span> 
        </li> 
       </ul> 
      </div> 

il devrait prendre le premier élément « span » avec classe .ui-icône et ajouter une classe, puis la suivante de la liste et ajouter d'autres classes.

Answer 1

.next() trouve le frère suivant immédiat à l'élément que vous avez sélectionné. Dans votre cas, l'intervalle que vous avez sélectionné a une ancre comme son frère suivant, puis rien. Vous devez remonter au parent li en utilisant parent ("li"), utiliser next() pour atteindre le li suivant dans la liste, puis utiliser find ("span span") pour accéder à la plage en question .

Il est probablement plus facile et beaucoup plus lisible pour sélectionner toutes les travées puis modifier chacun individuellement, par exemple:

$(function() { 
    $("a", "div.top_menu").addClass("ui-icons-custom"); 

    var $spans = $("span.ui-icon", "ul.top_menu_list"); 

    // end() reverts us back to the selector before each eq() 
    // you can just make this three separate statements if you like 
    $spans.eq(0).addClass("ui-icon-pencil").end() 
      .eq(1).addClass("ui-icon-comment").end() 
      .eq(2).addClass("ui-icon-key"); 
}); 

Er, et par curiosité, ce qui vous empêche d'y ajouter les classes aux éléments directement plutôt que d'utiliser jQuery pour le faire?

Answer 2

Jetez un coup d'oeil aux classes de CSSsu CSS3.

$('li:odd span.ui-icon') 

jQuery les prend en charge: http://api.jquery.com/nth-child-selector/