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")

有一个工作的Jsfiddle演示

Answer 3

This works

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

It is successfully selecting the elements that DON'T have .hide1 , .hide2 , .hide3 . checkout my example at jsfiddle . It is successfully hiding the elements that don't match the criteria, leaving the ones that don't visible. In this case it leaves 1,2,3,4 visable, because they DO have the .hide1 , .hide2 , .hide3 classes.

Answer 4

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

Answer 5

It seems to be working for me:

http://jsfiddle.net/maniator/mTkNL/

Answer 6

$("div.everyDiv").not(".hide1").not(".hide2").not(".hide3");

Answer 7

Try

$("[class=class2]")

or

$('.someclass[class="someclass"]')

Answer 8

I think your selector is fine - you're just not doing anything with it. Try this:

$("div.everyDiv").not(".hide1").not(".hide2").not(".hide3").fadeOut(1000);

You can also simplify this selector:

$("div.everyDiv").not(".hide1, .hide2, .hide3").fadeOut(1000);

You can see it working here:

http://jsfiddle.net/nS4jC/1/