Combining jQuery :not and :nth-child selectors

Question

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

I\'m trying to select every third item that doesn\'t have a particular class. This is m

Answer 1

Best easy way =)

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

Good luck =)

Answer 2

The only way I could see to make this work was to use two filter() calls:

$('.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.

You could, though, use a single filter() call, with an external variable:

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 reports that the single filter is, unsurprisingly, a little faster, but only very, very, very marginally.

References:

• filter().
• hasClass().

Answer 3

Nth-child can be counterintuitive when working with a filtered selection of a group.

Use .each() to get around its limitations:

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

Answer 4

UPDATE: i don't think this is possible with nth-child or another selector of jQuery. so consider using a more verbose solution:

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/ (alternative version: http://jsfiddle.net/TJdFS/)

:nth-child counts all matching elements ignoring any additional filters like :not.

see jquery doc:

The :nth-child(n) pseudo-class is easily confused with :eq(n), even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n) only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.

Example:

<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!)');

Result:

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

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

Answer 5

How about using the method to filter the results instead?

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

Here's a fiddle to demonstrate: http://jsfiddle.net/ntNgC/