第n個孩子，除非它有一類「隱藏」

我有幾個項目div的浮動左邊，以便他們似乎是在列中。用戶可以點擊任何給定項目上的「隱藏」，併爲該元素添加一個「.hide」類，該元素具有display：none css。第n個孩子，除非它有一類「隱藏」

問題：有沒有辦法做.item:not(.hide):nth-child(2n+2)？因此，當我有一個項目列表，其中一個隱藏在中間時，該規則仍適用並「忽略」.hide項目。

在jsbin

活生生的例子，http://jsbin.com/ajeqal/edit#javascript,html,live

如果您在右側的列項單擊「隱藏」，列出毛病在這個意義上，左邊欄應該始終有不同的背景顏色比右欄。我可以將隱藏的項目移動到列表的末尾，但這是更多的工作。

HTML：

<style> 
    .hide { display:none;} 
    .item{ float: left; width: 150px; padding: 5px; background: #ccc;} 
    .item:not(.hide):nth-child(2n+1) { background: #999; margin-right:5px } 
    .item a { display:inline-block; margin-left: 10px; } 
    body { width: 325px; } 
    #unhideAll { display: none; clear: left; margin-top: 20px;} 
    #container { overflow: auto; } 
</style> 
<body> 
    <div id="container"> 
    <div class="item">item<a href="#">hide</a></div> 
    <div class="item">item<a href="#">hide</a></div> 
    <div class="item hide">item<a href="#">hide</a></div> 
    <div class="item">item<a href="#">hide</a></div> 
    </div> 
    <div id="unhideAll"><a href="#">Unhide All</a></div> 
</body>

JS：

$('#unhideAll').click(function(e) { 
    e.preventDefault(); 
    $(".hide").removeClass("hide"); 
    $(this).hide(); 
}); 

$(".item a").click(function(e) { 
    e.preventDefault(); 
    $(this).parent().addClass("hide"); 
    $("#unhideAll").show(); 
});

來源

2012-06-11 Ian Davis

'$（ '項目：第n個孩子（2N + 2） '）。不是（' 隱藏' $（））' – Ohgodwhy

謝謝，但我希望有一個規則在CSS中爲我做這個 –

不幸的是沒有這樣的規則。 CSS'：nth-child（）'不會以這種方式進行過濾。 – BoltClock

首先，你可以說第n個孩子（單數）來代替。第二，如果你想給它一個鏡頭，你可以嘗試添加一個notHidden類（其中最初都會有），並且當添加'hide'時刪除'notHidden'，反之亦然。然後你可以在nnHidden隱藏（理論上）。

正如其他人說，當前，你正在做的方式不會爲第n個孩子的工作不考慮它去掉，我不知道這是否會工作，但算起來可能給你一個想法，如果沒有其他的。

來源

2012-06-11 19:27:58 Fewfre

你試過.item:not(.hide):nth-of-type(2n+2)？我打算做一些測試來確認，但乍一看似乎可能會奏效。

來源

2012-06-11 19:42:41

回覆我自己的建議：不，不，它不起作用。顯然，元素名稱在'：not（）'限定符之前匹配，所以你選擇了元素本身，然後一些元素被隱藏或不隱藏。詛咒！ –

沒有css選擇器來做到這一點。相反，我必須得到所有「.hide」元素，然後追加包含它們的div，基本上將它們全部移到最後。如果我這樣做，那麼他們不再與其他項目混合在一起。

來源

2012-06-11 20:02:20

當使用篩選的組選擇時，N-child可能會違反直覺。

使用。每（）來解決它的侷限性：

var count = 0; 
$('.item:not(.hide)').each(function(){ 
    if (count++ % 2 == 1) $(this).css('background-color','#999') 
})

來源

2012-10-26 05:02:22 spsaucier

第n個孩子，除非它有一類「隱藏」

回答

相關問題