结合jQuery的:不和:第n个孩子选择(Combining jQuery :not and :nt

2019-06-24 07:13发布

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

我试图选择不具有特定类中的每个第三个项目。 这是我的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

谢谢! :)

Answer 1:

我看得出来,使这项工作的唯一办法是使用两个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提琴演示 。

你可以,不过,使用单一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提琴演示 。

JS逆足报告说, 单过滤器,勿庸置疑,快一点 ,但只是非常, 非常非常轻微。

参考文献:

  • filter()
  • hasClass()


Answer 2:

如何使用该方法来筛选结果呢?

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

这里有一个小提琴证明: http://jsfiddle.net/ntNgC/



Answer 3:

更新:我不认为这是可能的第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个孩子计算所有匹配的元素忽略任何额外的过滤器,如:没有。

看到j​​Query的文档:

的:第n个孩子(n)的伪类是很容易混淆:EQ(N),即使两个可能导致显着的不同匹配的元素。 附:第n个孩子(N),所有儿童都计算在内,不管它们是什么,以及指定的元素被选中,只有当它连接到伪类选择相匹配。 用:当量(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/



Answer 4:

最简单的方法=)

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

祝你好运=)



Answer 5:

与一组筛选的选择工作时,第n个孩子可能是违反直觉的。

使用。每()来解决它的局限性:

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


文章来源: Combining jQuery :not and :nth-child selectors