结合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个孩子选择器

回答

相关问题