Check if div has exactly the classes in my list

Question

I'm searching a way to check if a div has exactly the classes in my list. Example:

My list of classes: .cat, .dog and .fish

If the div .animals has only divs with these classes, do something, but if there's another class wich is not included in my list (i.e.: .cat, .dog, .fish and .house) or if a class is missing (i.e.: .cat and .dog) do something different.

There's a way to do this? I tried to check with .has(), .hasclass() and .is(), but I couldn't make it work as I want.

Please post what you have tried. Your question is not clear to me. Do you want to check whether an element has all the three classes itself or whether an element has other elements with those classes inside of it? — Felix Kling, Jul 14 '13 at 22:19
@FelixKling only the things I said, like: ($('.animals').is(".fish, .cat, .dog")) using .has(), .hasclass() and .is() and things like these. — Jimmy, Jul 14 '13 at 22:23
@YotamOmer at the top of the post I said on "My list of classes: .cat, .dog and .fish". But if you asking for the classes wich I want to don't be included, no. I'm trying to do a "item mixer" for an browser game... and I want to make a button be displayed if the correct classes was apendded to the "mixer" div, so will be lots of itens, wich one with its class. — Jimmy, Jul 14 '13 at 22:27
But don't you have a more "complete" approach? `$('.animals').is(".fish, .cat, .dog"))` by itself doesn't do anything. And it's still unclear (to me) what *exactly* you are trying to do. — Felix Kling, Jul 14 '13 at 22:28
I would probably have used datasets instead of classes here, btw. This simplifies a logic - and shows your true intent better, in my opinion. — raina77ow, Jul 14 '13 at 22:34

kalley · Accepted Answer · 2013-07-14T22:59:40.303

2

var $el = $('.animals');
// using .is makes sure it doesn't matter the order
if ( $el.is('.cat.dog.fish') ) {
    if ( $.trim($el.attr('class').replace(/\b(animals|cat|dog|fish)\b/g, '')) ) {
        // it has some other class
        return;
    }
    // You're good to go
} else {
    // does not have all classes
}

Added boundaries and global flag to the regex.

Based on the fiddle in the OP's comments:

var $el = $('.animals');
var children = $el.children();
if ( children.filter(":not(.dog):not(.cat):not(.fish)" ).length ) {
    // Something else is in there
    alert("There's something else!");
} else {
    if ( ! children.filter('.dog').length || ! children.filter('.cat').length || ! children.filter('.fish').length ) {
        // Something is missing
        alert("You're missing something");
        return;
    }
    // Good to go.
    alert("Everything is good!");
}

Though, I'm pretty sure there is a more efficient way to do this.

edited Jul 14 '13 at 22:59

answered Jul 14 '13 at 22:27

kalley

18,072
2
39
36

@raina77ow good point. I've updated the regex to reflect that and added the global flag – kalley Jul 14 '13 at 22:38
Didn't worked for me. http://jsfiddle.net/GfYCW/ – Jimmy Jul 14 '13 at 22:47
Updated with new approach. Your original question made it sound like your structure was more like `
`, which seems to be how everyone took it. – kalley Jul 14 '13 at 23:00
Oh, man. Thank you a lot. I really think I'm trying to do this at the wrong way... but you helped me a lot with your code. – Jimmy Jul 14 '13 at 23:06
@Jimmy: If you read [my very first comment](http://stackoverflow.com/questions/17644356/check-if-div-has-exactly-the-classes-in-my-list/17644405#comment25693499_17644356) on your question, you will notice that I already asked for clarification of your problem. If you would have edited your question to include the HTML code (and provided a better explanation), you would have gotten more relevant answers from the start. Next time please provide clarification if someone asks for it. – Felix Kling Jul 16 '13 at 08:07

score 0 · Answer 2 · answered Jul 14 '13 at 22:25

0

Just use hasClass();

like so...

 var check = $('.animals').hasClass('fish cat dog');
 if(check) {
 //do stuff you wanna do   
 } else {
 //do other stuff
 }

However, this will check if it has those classes in that order, if you wanna check if it has one of the classes. then do...

var dog = $('.animals').hasClass('dog');
var cat = $('.animals').hasClass('cat');
var fish = $('.animals').hasClass('fish');

Then you can do an if for those variables that you need.

if((dog)&&(cat)&&(fish)){
 //do stuff
 } else {
 //do other stuff
 }

etc...

answered Jul 14 '13 at 22:25

Kylie

11,421
11
47
78

The documentation doesn't mention that `.hasClass` accepts a space separated list of classes. Does this really work? And does it return `true` if the element has all of these classes or just one of them? – Felix Kling Jul 14 '13 at 22:26
http://stackoverflow.com/questions/263232/determine-if-an-element-has-a-css-class-with-jquery – Kylie Jul 14 '13 at 22:29
I think in the example above it will return true, only if they are all three, in that order, that is why I provided the other way as well... – Kylie Jul 14 '13 at 22:30
So, it doesn't really "work" ;) – Felix Kling Jul 14 '13 at 22:31
So, as @FelixKling, it doesn't work. – Jimmy Jul 14 '13 at 22:35

Check if div has exactly the classes in my list

2 Answers2