忽略不可見元素與：在選擇器中的第n個孩子

我有一個<li>元素的列表，並且我使用:nth-child來定位每個第3和第4元素的特定子元素，並給他們一個額外的類.right。忽略不可見元素與：在選擇器中的第n個孩子

但是，當我隱藏一些元素（比方說，第一個或第二個列表項）時，它無法正常工作。我想僅向可見列表項的子項添加「右」類。我怎樣才能做到這一點？

這是我使用的代碼：

$(".ilist:visible:nth-child(4n+3)").find(".window").addClass("right"); 
$(".ilist:visible:nth-child(4n+4)").find(".window").addClass("right");

我刪除所有類.right這個：

$(".ilist .window.right").removeClass("right");

HTML結構：

<ul> 
    <li class="ilist"> 
     ... 
     <div class="name">Name (Search works with it)</div> 
     <div class="window"></div> 
    </li> 

    ... 
</ul>

來源

2013-02-02 Berny

您的問題並不完全清楚。當你使用搜索時會發生什麼？什麼是您的HTML結構？你是什麼意思「不能正常工作」？ –

當我使用搜索，然後添加類。右鍵隨機工作。例如，如果元素是8，那麼只有一個會得到class .right。 – Berny

什麼是「搜索」？它是一個元素嗎？ –

事實上，您隱藏一個元素不會改變它在DOM樹中的位置，所以nth-child(4n+3)不會cha如果您隱藏任何兄弟列表項目，則爲nge。

當您切換某些元素的可見性列表項時，您必須重置right類，然後重新應用相應的元素。

您可以通過將函數傳遞給addClass而不是新的類名來實現。該函數將接收匹配元素的索引作爲第一個參數，並且可以使用它檢查它是第3還是第4個。如果是，則返回要應用新的類名稱：

$(".ilist .window.right").removeClass("right"); 
$(".ilist:visible .window").addClass(function(i, currentClass){ 
    return (i == 2 || i == 3) ? "right" : ""; 
});

現場演示在http://jsfiddle.net/6TMmJ/

來源

2013-02-02 23:58:19 bfavaretto

一類添加到每個第n個可見的列表項的孩子，你可以先找到所有可見的列表物品，然後通過它們在集合中的排名過濾那些：

$(".ilist:visible").filter(function(index){ 
    return (index % 4 == 0) || (index % 4 == 3); 
}).find(".window").addClass("right");

來源

2013-02-03 00:10:32

忽略不可見元素與：在選擇器中的第n個孩子

回答

相關問題