jQuery - Check if element has a class from an array?

Question

Im trying to check if an element has a class from an array and if so what is the value of that class. At the moment I am just using:

if ($(this).hasClass('purple_grad')) {
            $thisFKeyColour = 'purple_grad';
        } else if ($(this).hasClass('red_grad')) {
            $thisFKeyColour = 'red_grad';
        } else if ($(this).hasClass('green_grad')) {
            $thisFKeyColour = 'green_grad';
        } else if ($(this).hasClass('blue_grad')) {
            $thisFKeyColour = 'blue_grad';
        } else if ($(this).hasClass('yellow_grad')) {
            $thisFKeyColour = 'yellow_grad';
        } else if ($(this).hasClass('light_yellow_grad')) {
            $thisFKeyColour = 'light_yellow_grad';
        } else if ($(this).hasClass('lighter_yellow_grad')) {
            $thisFKeyColour = 'lighter_yellow_grad';
        } else if ($(this).hasClass('grey_grad')) {
            $thisFKeyColour = 'grey_grad';
        } else if ($(this).hasClass('light_grey_grad')) {
            $thisFKeyColour = 'light_grey_grad';
        } else if ($(this).hasClass('black_grad')) {
            $thisFKeyColour = 'black_grad';
        }
}
alert($thisFKeyColour);

Is there a better way of doing this? Something like:

if (in_array(classes, element.attr('class'))) {
    $thisFKeyColour = Class_Of_Element_That_Matched_Array;
}

Also, I cant just return the .attr('class') as their are multiple classes on the element.

Cheers
Charlie

What about a foreach loop on an array of possible class names, assign your value and break if true. — Lazarus, Mar 08 '11 at 12:46
possible duplicate of [jQuery hasClass() - check for more than one class](http://stackoverflow.com/questions/2214952/jquery-hasclass-check-for-more-than-one-class) — Stephan Weinhold, May 08 '15 at 09:10
Similar to http://stackoverflow.com/questions/31385584/check-if-element-contains-any-of-the-class-from-array/31386150#31386150 — Tushar, Aug 06 '15 at 07:43

karim79 · Answer 1 · 2011-03-08T12:59:20.437

10

The following should do it (untested):

var elementClasses = $(this).attr("class").split(" ");
for(var i = 0; i < elementClasses.length; i++) {
    if($.inArray(elementClasses[i], classes)) {
        $thisFKeyColour = classes[i];
        break;
    }
}

Try it out here.

Reference:

http://api.jquery.com/jQuery.inArray/

edited Mar 08 '11 at 12:59

answered Mar 08 '11 at 12:47

karim79

339,989
67
413
406

I thought that that is how it would work, although I have more than one class assigned to the element (as said at the end of OP). – Charlie Sheather Mar 08 '11 at 12:50
@mrplungjan - the pure jQuery one was inadequate, as @Charlie aptly pointed out. `$.each` is nice, for is quicker. To each his own, I guess. :) – karim79 Mar 08 '11 at 13:00
Works great, am using @Steve Claridge's tho as its faster. Thanks anyway @karim79. – Charlie Sheather Mar 08 '11 at 13:00
Mine is the fastest :) A maximum of x loops where x is the number of classes assigned to the object rather than number of classes possible, i.e. max 3 if you have class="class1 class2 class3" – mplungjan Mar 08 '11 at 13:06
@mplungjan , true, but I know how many classes I am going to loop through and how many classes the element will have :) – Charlie Sheather Mar 08 '11 at 13:09

score 8 · Accepted Answer · answered Mar 08 '11 at 12:54

8

cols is your array of class names. This is untested but will work regardless of number of classes an element has.

for ( var i = 0; i < cols.length; i++ )
{
  if ( $(this).hasClass( cols[i] ) )
  {
    $thisFKeyColour = cols[i];
    break;  
  }
}

answered Mar 08 '11 at 12:54

Steve Claridge

10,650
8
33
35

Of course!, loop through the array, not the classes. Perfect, Thanks mate :) – Charlie Sheather Mar 08 '11 at 12:59

mplungjan · Answer 3 · 2013-04-17T14:39:32.083

Assuming

var possibleFKeyColors = [
            'purple_grad',
            'red_grad',
            'green_grad',
            'blue_grad',
            'yellow_grad',
            'light_yellow_grad',
            'lighter_yellow_grad',
            'grey_grad',
            'light_grey_grad',
            'black_grad'
];

plain JS with older browser support

var hasIndexOf = Array.prototype.indexOf, // older browsers
    testClasses = (hasIndexOf)?"":"@"+possibleFKeyColors.join("@")+"@";
function getClass(obj) {
  var possibleClasses = obj.getAtttribute("class").split(" ");
  for (var i=0;i<possibleClasses.length;i++) { // or some jQuery array scanner
    if (
     ( hasIndexOf && possibleFKeyColors.indexOf(possibleClasses[i])  !=-1) || 
     (!hasIndexOf && testClasses.indexOf("@"+possibleClasses[i]+"@") !=-1) 
    ) return = possibleClasses[i];
  }
  return "";
}

var FKeyColour = getClass(document.getElementById("someObject"));

jQuery

function getClass(obj) {
  var thisFKeyColour = "";
  $.each(possibleFKeyColors, function(i,class) {
    if (obj.hasClass(class)) { 
      thisFKeyColour=class;
      return false;
    }
  }
  return thisFKeyColour;
} 

var FKeyColour = getClass($("#someObject"));

jQuery - Check if element has a class from an array?

3 Answers3

Linked