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
– Lazarus, Commented Mar 8, 2011 at 12:46
possible duplicate of jQuery hasClass() - check for more than one class — Stephan Weinhold
– Stephan Weinhold, Commented May 8, 2015 at 9:10

karim79 · Accepted Answer · 2011-03-08 12:59:20Z

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 8, 2011 at 12:59

answered Mar 8, 2011 at 12:47

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Charlie Sheather Over a year ago

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

karim79 Over a year ago

@mrplungjan - the pure jQuery one was inadequate, as @Charlie aptly pointed out. $.each is nice, for is quicker. To each his own, I guess. :)

Charlie Sheather Over a year ago

Works great, am using @Steve Claridge's tho as its faster. Thanks anyway @karim79.

mplungjan Over a year ago

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"

Charlie Sheather Over a year ago

@mplungjan , true, but I know how many classes I am going to loop through and how many classes the element will have :)

Steve Claridge · Accepted Answer · 2011-03-08 12:54:09Z

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 8, 2011 at 12:54

Steve Claridge

11.2k8 gold badges35 silver badges36 bronze badges

1 Comment

Charlie Sheather Over a year ago

Of course!, loop through the array, not the classes. Perfect, Thanks mate :)

mplungjan · Accepted Answer · 2013-04-17 14:39:32Z

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"));

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related