How do I check with jQuery if an element has at least one class, from a list of specified classes?

Question

Example html:

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="apple"></div>

I want to loop through the divs and filter them out if they don't have a class of either 'red', 'green', or 'blue.'

var onlyColorDivs = $('div').hasClass( ____ );

Is there a way to fillin the blank in the previous line to accomplish this. Or am I going to have to put my list color classes in an array and do a loop?

Thanks! And let me know if any clarification is needed.

Answer 1

http://stackoverflow.com/questions/263232/determine-if-element-has-css-class-with-jquery

http://docs.jquery.com/Traversing/hasClass

Answer 2

This will select only <div> elements that have at least one of those 3 classes.

Try it out: http://jsfiddle.net/gADQn/

var onlyColorDivs = $('div.red, div.green, div.blue');

Answer 3

.filter('.red,.green,.blue')

Should do the job.

Or just initially select them:

$('.red,.green,.blue', context)

Answer 4

.filter(selector) is the function you are looking for. Calling this on a selection of jQuery elements will refine the selection to those elements that match the selector you provide. Additionally, you could simply only select those elements to begin with.

So either: $('div').filter('.red, .green, .blue');

Or: $('div.red, div.green, div.blue');

Here's the documentation on using the filter function: http://api.jquery.com/filter/

And finally here's a demonstration of using it: http://jsfiddle.net/Etb7R/

This little script selects all <div>s and fills them with the text of their class attribute, then filters down to only those with the classes 'red', 'green', or 'blue' and applies an additional class to highlight them. Hopefully that should give you a good idea of your range of options.

Answer 5

All the answers are great and are appropriate. But, if you need a function like this a lot, you could also Monkey Patch the hasClass method to do what you want:

var _hasClass = $.fn.hasClass;
$.fn.hasClass = function (classNames) {
  if (!classNames || typeof classNames === "string" ) {
    return _hasClass.call(this, classNames); // Default behavior
  } else {
    // Take array and parse it for the filter method
    var classes = '.' + classNames.join(', .');
    return this.filter(classes).length > 0;
  }
};

Then you can use it like this:

$("div").hasClass(['red','green','blue']);
// or
$("div").hasClass('green');

Demo on JS Bin