jQuery - Check if element has a class from an array?
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 =开发者_如何学JAVA '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
CharlieThe 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/
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;
}
}
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"));
精彩评论