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