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('class') 因为它们是元素上的多个类。

干杯
查理

Answer 1

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

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 2

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

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

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