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

Answer 1

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/

Answer 2

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;  
  }
}

Answer 3

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