結合jQuery：不是和：第n個孩子選擇器

$j('.select-all-these:not(.except-these):nth-child(3n)');

我試圖選擇每一個沒有特定類的第三個項目。這是我的jQuery選擇器，但它不起作用 - 看起來：nth-child選擇器忽略：not選擇器。我做錯了嗎？結合jQuery：不是和：第n個孩子選擇器

作爲一個例子，這是它應該是如何工作的：

.select-all-these.except-these 
.select-all-these.except-these 
.select-all-these.except-these 
.select-all-these 
.select-all-these.except-these 
.select-all-these 
.select-all-these <-- THIS ONE IS SELECTED 
.select-all-these.except-these

謝謝！ :)

來源

2012-05-09 Luke Carbis

我可以看到，使這項工作的唯一辦法是使用兩個filter()電話：

$('.select').filter(
    function(){ 
     return !$(this).hasClass('dontselect'); 
    }).filter(
     function(i){ 
      return (i+1)%3 == 0; // unless you want a zero-based count, regular CSS is one-based 
     }).css('color','red');

JS Fiddle demo。

你可以，不過，使用單一filter()調用，與外部變量：

var count = 0; 
$('.select').filter(
    function(){ 
     console.log(!$(this).hasClass('dontselect')); 
     if (!$(this).hasClass('dontselect')){ 
      count++; 
      return count%3 == 0; 
     } 
    }).css('color','red');

JS Fiddle demo。

JS逆足報告說，single filter is, unsurprisingly, a little faster，但只有非常，非常，非常輕微。

參考文獻：

filter()。
hasClass()。

來源

2012-05-09 06:31:10

我有一個類似的問題，而是想要做其他所有元素。因此，如果您只是在尋找其他所有元素而不是第三個元素，那麼這是一種更簡潔的方法。 '（'。'select：not（.dontselect）'）。filter（：even）.css（'color'，'red'）;' –

如何使用該方法來篩選結果呢？

$('.select-all-these:nth-child(3n)').not('.except-these');

這裏有一個小提琴證明：http://jsfiddle.net/ntNgC/

來源

2012-05-09 05:18:00 kinakuta

謝謝 - 但這同樣的問題 - 它會選擇每個第三個項目，然後如果該項目有'.except-這些'它將忽略它。我需要的邏輯是不同的 - 選擇不是'.except-這些'的每一個第三項 - 這是否有道理？ –

不完全。選擇每個不匹配選擇器的第三個項目「.except - 這些」聽起來像忽略「.except-these」一樣。如果你包含了一些示例標記，然後說明你想要選擇什麼，以及你不想從標記中選擇什麼，那麼可能會更清楚。啊 - 我看到你包括了 - 現在我來看看它。 – kinakuta

好的，你試圖做的問題是應用的過濾器正在使用元素狀態，因爲它們當前存在於DOM中，而不是它們在前一個過濾器生成的所選集合中的狀態。所以當你想要選擇每一個篩選出其他元素的結果的第三項時，你只會獲得作爲整體的第三項的元素。那有意義嗎？要做出你想要的選擇，你需要使用一個函數來定義你想要過濾的子集。 – kinakuta

UPDATE：我不認爲這是可能的第n個孩子或jQuery的另一項選擇。所以請考慮使用更詳細的解決方案：

var count = 0; 
$('.select-all-these').each(function() { 
    if(!$(this).hasClass('except-these')) { 
     count++; 
    } 
    if(count === 3) { 
     $(this).text('every 3rd element'); 
     count = 0 
    } 
});

http://jsfiddle.net/TJdFS/2/（另一版本：http://jsfiddle.net/TJdFS/）

：第n個孩子計算所有匹配的元素忽略任何額外的過濾器，如：沒有。

見jQuery的文檔：

的：第n個孩子（n）的僞類是很容易混淆：EQ（N），即使兩個可能導致顯着的不同匹配的元素。使用：nth-child（n），所有的孩子都被計數，不管它們是什麼，只有當它匹配僞類的選擇符時，指定的元素才被選中。使用：eq（n）只有連接到僞類的選擇器被計數，不限於任何其他元素的子元素，並且第（n + 1）個元素（n是從0開始）被選中。

實施例：

<div class="select-all-these">1</div> 
<div class="select-all-these except-these">2</div> 
<div class="select-all-these except-these">3</div> 
<div class="select-all-these">4</div> 
<div class="select-all-these except-these">5</div> 
<div class="select-all-these">6</div>

JS：

$('.select-all-these:not(.except-these):nth-child(6)').text('nth-child counts all elements (1 based!)'); 
$('.select-all-these:not(.except-these):eq(1)').text('eq counts only matching elements (0 based!)');

結果：

1 
2 
3 
eq counts only matching elements. (0 based!) 
5 
nth-child counts all elements (1 based!)

http://jsfiddle.net/nFtkE/2/

來源

2012-05-09 05:22:24

謝謝你的回答，但eq沒有'n' - 所以我不能選擇每第三個元素，只有特定的元素。 –

哦對不起，我完全忽略了'every'這個詞.. ;-)我的錯。 –

非常感謝您的幫助 - $ .each解決方案能夠工作 - 但我決定使用過濾器來代替，因爲我認爲它可能會帶來很多元素。 –

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

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

var count = 0; 
$('.select-all-these:not(.except-these)').each(function(){ 
    if (count++ % 2 == 0) $(this).css('color','red') 
})

來源

2012-10-26 04:52:49 spsaucier

最簡單的方式=）

$('table tr:not(.class)').eq(1);

好運氣=）

來源

2014-01-13 18:29:42 fdrv

最佳解決方案。 :) +1代表你。 – Tareq

結合jQuery：不是和：第n個孩子選擇器

回答

相關問題