How can I select elements that don't have any of several classes using jQuery?

Question

I have a page with many elements that have the same class attached to them:

<div class="everyDiv"></div>
<div class="everyDiv"></div>
<div class="everyDiv"></div>
<div class="everyDiv"></div>
...

I add additional classes based on filters the user chooses to hide/display them:

<div class="everyDiv hide1"></div>
<div class="everyDiv hide2"></div>
<div class="everyDiv hide3"></div>
<div class="everyDiv hide2 hide3"></div>
...

Now, I need to select a range (using slice()) of the .everyDiv elements that DON'T have any of the "hide" classse - .hide1 .hide2 .hide3.

How can I do this with jQuery?

I've tried the following without success:

$("div.everyDiv").not(".hide1").not(".hide2").not(".hide3").slice(n1, n2);

$("div.everyDiv:not(.hide1):not(.hide2):not(.hide3)").slice(n1, n2);

This doesn't work either:

$("div.everyDiv:not(.hide1), div.everyDiv:not(.hide2), div.everyDiv:not(.hide3)").slice(n1, n2);

Basically, all of the "hide#" classes have CSS of display: none;, so I need to select my specified range of the divs that aren't "hidden".

Answer 1

this should do it:

$('div.everyDiv:not(.hide1, .hide2, .hide3)').hide();

http://jsfiddle.net/s9uyk/

as per comments: making it a little more obvious what the fiddle is doing: not it adds a class to all the ones that DON'T Have any of the hide classes. http://jsfiddle.net/s9uyk/2/

Answer 2

$('div.everyDiv').not(".hide1, .hide2, .hide3")

with a working Jsfiddle demo