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 my jQuery selector, but it doesn't work - it seems that the :nth-child selector ignores the :not selector. Am I doing it wrong?

As an example, this is how it should work:

.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

Thanks! :)

Answer 1

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 2

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/