I have set of 6 elements and I would like to filter by every second and third element so I want to have elements 2, 3, 5 and 6. I've tried .filter(':nth-child(2n+1)')); but obviously that filters the 2, 4, and 6.

The other way I was trying was to remove elements 1 and 4, but I couldn't find a jQuery function that was the opposite of filter that would remove the elements from the set.

I have set of 6 elements and I would like to filter by every second and third element so I want to have elements 2, 3, 5 and 6. I've tried .filter(':nth-child(2n+1)')); but obviously that filters the 2, 4, and 6.

The other way I was trying was to remove elements 1 and 4, but I couldn't find a jQuery function that was the opposite of filter that would remove the elements from the set.

• javascript
• jquery

• 1 Can you explain how "every 2n and 3n" does include #5, but does not include #4? Did you mean "I want to have elements 2, 3, 4, and 6"? – Phrogz Commented Apr 9, 2012 at 19:28
• I agree with Phrogz that your question is not stated correctly. It sounds to me like what you really want to do is skip the first element, and then every third element thereafter. In other words, you want to skip every element that has n%1=1. – Ethan Brown Commented Apr 9, 2012 at 19:48
• @Phrogz No, I think ephemient answer explains what I wanted better. "the 2nd and 3rd out of every group of 3" – Paul Sham Commented Apr 9, 2012 at 19:56
• There's been a bunch of discussion on what I actually wanted. If somebody has a better remendation for what I can title this question, please see accepted answer and let me know. – Paul Sham Commented Apr 9, 2012 at 19:58

5 Answers 5

.filter(':not(:nth-child(1),:nth-child(4))')

http://jsbin./owosuw/2/edit#source

Going by your example, I don't think you actually want 2n and 3n. You want the 2nd and 3rd out of every group of 3? Then either one of these should work:

.filter(':nth-child(3n+2), :nth-child(3n+3)'));
.filter(':not(:nth-child(3n+1))');

You can also use filter with a function (that takes a single parameter which is the zero-based number of the matched element):

$('div').filter( function(n) { return n%3!=0 } )

See my JSFiddle proof-of-concept here:

http://jsfiddle/4c4Re/

I think you can't do it with only one nth-child. I don't know what you want to do, but if you want to give it a style or class or event or something in that category you can give it them all and remove it from the 1th and the 4th:

$('div').addClass('red');

$('div:nth-child(3n+1)').removeClass('red');

Live example: http://jsfiddle/gnbMH/

You could also use two nth-childs to get it work:

$('div:nth-child(3n+2)').addClass('red');
$('div:nth-child(3n+3)').addClass('red');

Live example: http://jsfiddle/gnbMH/1/

You also could bine to the two nth-childs and then you get something like this:

var elems = $('div:nth-child(3n+2)');
$('div:nth-child(3n+3)').each(function(i,elem) {
    elems.push(elem);
});

$(elems).addClass('red');

Live example: http://jsfiddle/gnbMH/2/

Try using :not(:nth-child(3n+1)).. Something like .filter(':not(:nth-child(3n+1))').

DEMO