CODEWITHSUNDEEP
jqueryjquery-selectorsfilter
Eric Belair
Eric Belair

Reputation: 10702

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

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

Upvotes: 4

Views: 6750

Answers (8)

Patricia
Patricia

Reputation: 7802

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/

Upvotes: 15

dotty
dotty

Reputation: 41523

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.

Upvotes: 1

Phil
Phil

Reputation: 11175

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

with a working Jsfiddle demo

Upvotes: 2

Surreal Dreams
Surreal Dreams

Reputation: 26380

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/

Upvotes: 0

myklee
myklee

Reputation: 155

Try 

$("[class=class2]")

or

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

Upvotes: 0

Alex
Alex

Reputation: 249

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

Upvotes: 1

Naftali
Naftali

Reputation: 146360

It seems to be working for me:

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

Upvotes: 0

Teddy
Teddy

Reputation: 18572

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

Upvotes: 1

Related Questions