jQuery - Comprobar si el elemento tiene una clase de una matriz

Question

Estoy tratando de verificar si un elemento tiene una clase de una matriz y, de ser así, cuál es el valor de esa clase. Por el momento solo estoy usando:

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

¿Hay una mejor manera de hacerlo? Algo así como:

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

Además, no puedo simplemente devolver el .attr ('clase') ya que hay múltiples clases sobre el elemento.

Saludos
Charlie

Answer 1

cols es su gama de nombres de clase. Esto no se ha probado, pero funcionará independientemente del número de clases que tenga un elemento.

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

Answer 2

La siguiente debe hacerlo (no probado):

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.

Referencia:

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

Answer 3

Suponiendo

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' 
]; 

JS lisos con mayor soporte de los navegadores

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