jQuery的：addClass的列表

Question

我試着使用jQuery添加不同類的每個跨度元素，使用的.next（） 這的每個的.next（）元素是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> 

而且這是HTML進出口試圖使其工作：

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

所以應該採取處理.ui圖標類的第一個「跨度」元素，並添加一個類，那麼接下來從列表中添加其他類。

Answer 1

的.next（）找到下一個即時兄弟姐妹，你選擇的元素。在你的情況下，你選擇的跨度有一個錨點作爲下一個兄弟，然後什麼也沒有。您必須使用父（「li」）回到父li，使用next（）來到列表中的下一個li，然後使用find（「span span」）來找到有問題的跨度。

它可能更容易和更大量可讀性選擇所有的跨度，然後分別編輯每個，如：

$(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和出於好奇，是什麼阻止你直接添加類的元素而不是使用jQuery來做到這一點？

Answer 2

看看CSS3 psuedo類。

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

jQuery的支持他們：http://api.jquery.com/nth-child-selector/