jQuery - 检查元素是否有数组中的类？

Question

我试图检查一个元素是否有一个数组中的类，如果有的话，那个类的值是什么。目前我正在使用：

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

有没有更好的方法来做到这一点？就像：

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

另外，我不能只返回.attr（'类'），因为它们是元素上的多个类。

干杯
查理

Answer 1

的cols是你的类名称的数组。这是未经测试的，但无论元素具有多少个类别都可以工作。

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

Answer 2

下应该这样做（未经测试）：

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.

参考：

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

Answer 3

假设

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与旧的浏览器支持

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