结合jQuery:not和:nth-​​child选择器

时间:2012-05-09 05:05:23

标签: jquery jquery-selectors

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

我正在尝试选择没有特定课程的每个第三项。这是我的jQuery选择器,但它不起作用 - 似乎:nth-​​child选择器忽略:not选择器。我做错了吗?

作为一个例子,它应该如何运作:

.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

谢谢! :)

5 个答案:

答案 0 :(得分:6)

如何使用该方法来过滤结果?

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

这是一个演示的小提琴:http://jsfiddle.net/ntNgC/

答案 1 :(得分:5)

我能看到这项工作的唯一方法是使用两个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 Perf报告single filter is, unsurprisingly, a little faster,但只是非常非常 非常

参考文献:

答案 2 :(得分:3)

更新: 我不认为这是可能的nth-child或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/

:nth-​​child计算所有匹配元素,忽略任何其他过滤器,例如:not。

参见jquery doc:

  

:nth-​​child(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/

答案 3 :(得分:2)

最简单方法=)

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

祝你好运=)

答案 4 :(得分:1)

使用过滤后的群组选择时,Nth-child可能违反直觉。

使用.each()来克服其局限性:

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