Question

我如何知道DOM元素有多个类？

例如，知道该元素可能包含test和b类中的一个或两个，我会检查这两个类是否以下列方式存在：

if(jQuery(a).hasClass('test') && jQuery(a).hasClass('b'){  
    //Do  something`
}

但是我需要报道我不知道哪些课程可能存在的情况。

Answer 1

这是一个需要搜索元素和特定类的函数。它所做的是迭代元素传递的所有类是其中的一部分如果找到匹配的搜索值，则可以在if语句中定义行为。

您可以按以下方式调用doSomething('#element', 'error'));

function doSomething(elementid, classname)
{
    var classes = $(elementid).attr('class').split(/\s+/);
    $.each( classes, function(index, current){        
        if (current == classname) {
            //do something here
        }
    });

}

Answer 2

假设类名称未知，您可以尝试这样的事情：

<强> DEMO

<div class="test b" id="foo"></div>

===========================================
var elem = document.getElementById('foo');
if (elem.className.match(/ /)) {
    alert('class names: '+elem.className)
}

Answer 3

至少有一种方法可以使用jQuery，这里有：

var numberOfClasses = jQuery(element).attr("class").trim().split(/\s+/).length;

if(numberOfClasses > 1){
    // do what Ayush wants
}

Answer 4

使用jQuery：如果$（element）.attr（＆＃34; class＆＃34;）。indexOf（＆＃39;＆＃39;）不是-1，则有多个类。

function hasMultipleClasses(elem) {
   if(elem.attr("class").indexOf(' ')>-1) 
    return true;
   else return false;
}

DEMO

Answer 5

以下代码适用于我。请检查一下。

// This code will returns all the based on the selector and split them based on empty seperator
var arr = jQuery(a).attr('class').split(' ');

//Removes all empty strings
arr = jQuery.grep(arr, function( a ) {

    return a !== '';

});

// This condition will be satisfied on if the selector contains multiple classes
if(arr.length > 1){

  //Code to execute

}

Answer 6

使用jquery做这件事有点强大，你认为不是吗？

你可以使用原生Javascript来做到这一点：

element.className.trim().split(/ /).length > 1

Answer 7

这看起来像你想要那些选定类的集合然后循环，而不是动态创建if语句。

var selectedClasses = [ "test", "b" ];

var hasAllClasses = CheckIfAllClassesAvailable(a, selectedClasses);


function CheckIfAllClassesAvailable(a, selectedClasses) {

    //loop through all the selected classes
    for(String s : selectedClasses)
    {
        //check if the class is not available
        if(!jQuery(a).hasClass(s))
        {
           return false;
        }
    }
    return true;
}

我不知道这段代码是否在语法上有效（请将其视为伪代码），但我认为这是要走的路，你只需要动态创建所选类别的数组，你可以用一个简单的Web服务调用，想一想。

如果你使用一些不错的jQuery one liners，你可以将它重写为一个较短的变种，但我认为现在更清楚了。

Answer 8

    jQuery('selector').click(function () { // The event trigger
 var finalClass = []; // array to store all the classes which has been triggered by the event
        var i=0;
        jQuery('.collaps-list li').each(function () {
            finalClass[i] = jQuery(this).attr('id');
            i++;
        });  
jQuery(selector).each(function () {
            var $flag =0;
            for(i=0;i<finalClass.length;i++){
                if (jQuery(this).find('a').hasClass(finalClass[i])) {
                    $flag=1;
                }
                else{
                    $flag=0;
                    break;
                }
            }
            if($flag==1){
                jQuery(this).find('img').removeClass('grayscale');
            }
});

这对我有用

如何使用jquery或javascript动态检查元素是否有多个类

8 个答案: