javascript jQuery - 检查元素是否有来自数组的类？

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

提问by Charlie Sheather

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.

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

Cheers
Charlie

干杯
查理

采纳答案by Steve Claridge

cols is your array of class names. This is untested but will work regardless of number of classes an element has.

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

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

回答by karim79

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/

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

回答by mplungjan

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

具有旧浏览器支持的纯 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

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