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 filling 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?

Let me know if any clarification is needed.

Answer 1

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

Answer 2

Is there something wrong with using the conventional selection way?

$(".red, .green, .blue");

If you already have a collection you want to filter, say

$("div");

You can use the filter function as mentioned, but that would be slower, so if you have a choice, code it in a single selector.

Extending jQuery for an already supported functionality that's available with a different syntax is unnecessary. If you insist on using an array as input, it would be faster to join it in a selector:

var classes = new Array("red", "green", "blue");
$("div." + classes.join(",div."));

Answer 3

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 4

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

Should do the job.

Or just initially select them:

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

Answer 5

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

Determine if an element has a CSS class with jQuery

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