第一個元素後的替代顏色類

Question

我需要添加添加一個類，以不同的方式設置樣式列表項。因爲我在頁面上有多個列表，我需要爲每個列表重新啓動樣式，所以我決定查看每個列表。

$('ul.myList').each(function() { 
    $('li:visible:even:not(.red, .green)').addClass('newStyle'); 
}); 

某些項目被隱藏，每個列表中的前兩項需要跳過。

<ul> 
    <li class="red">...</li> 
    <li class="blue">...</li> 
    <li>...</li> 
    <li>...</li> 
    <li class="hidden">...</li> 
    <li>...</li> 
</ul> 

<ul> 
    <li class="red">...</li> 
    <li class="blue">...</li> 
    <li class="hidden">...</li> 
    <li class="hidden">...</li> 
    <li>...</li> 
    <li>...</li> 
    <li>...</li> 
    <li>...</li> 
</ul> 

出於某種原因，似乎奇數/偶數從一個列表繼續到另一個列表。我錯過了什麼？

P.S.在這裏，我使用隱藏來提供一個想法，實際上有幾種不同的方式隱藏。

Answer 1

如果您想「重新啓動」偶數/奇數，您的li選擇器需要指定參考點。 您可以使用.find()選擇後代元素。

$('ul.myList').each(function() { 
    $(this).find('li:visible:even:not(.red, .green)').addClass('newStyle'); 
}); 

的$(this)在上述背景下指的是特定ul您當前迭代的.each()