使用jQuery获取元素的类列表

jQuery中是否有一种方法可以循环遍历或分配给数组中所有被分配给元素的类?

ex.

<div class="Lorem ipsum dolor_spec sit amet">Hello World!</div>

我将寻找一个“特殊”类，如上面的“dolor_spec”。我知道我可以使用hasClass()，但实际的类名可能并不一定知道。

当前回答

有点晚了，但是使用extend()函数可以让你在任何元素上调用“hasClass()”，例如: var hasClass = $('#divId').hasClass(' someeclass ');

(function($) {
$.extend({
    hasClass: new function(className) {
        var classAttr = $J(this).attr('class');
        if (classAttr != null && classAttr != undefined) {
            var classList = classAttr.split(/\s+/);
            for(var ix = 0, len = classList.length;ix < len;ix++) {
                if (className === classList[ix]) {
                    return true;
                }
            }
        }
        return false;
    }
}); })(jQuery);

2010-06-21 09:35:04

其他回答

下面是一个jQuery插件，它将返回匹配元素的所有类的数组

;!(function ($) {
    $.fn.classes = function (callback) {
        var classes = [];
        $.each(this, function (i, v) {
            var splitClassName = v.className.split(/\s+/);
            for (var j = 0; j < splitClassName.length; j++) {
                var className = splitClassName[j];
                if (-1 === classes.indexOf(className)) {
                    classes.push(className);
                }
            }
        });
        if ('function' === typeof callback) {
            for (var i in classes) {
                callback(classes[i]);
            }
        }
        return classes;
    };
})(jQuery);

像这样使用它

$('div').classes();

在你的情况下

["Lorem", "ipsum", "dolor_spec", "sit", "amet"]

您还可以将一个函数传递给每个类上要调用的方法

$('div').classes(
    function(c) {
        // do something with each class
    }
);

下面是我用来演示和测试http://jsfiddle.net/GD8Qn/8/的jsFiddle

缩小的Javascript

;!function(e){e.fn.classes=function(t){var n=[];e.each(this,function(e,t){var r=t.className.split(/\s+/);for(var i in r){var s=r[i];if(-1===n.indexOf(s)){n.push(s)}}});if("function"===typeof t){for(var r in n){t(n[r])}}return n}}(jQuery);

2012-06-27 18:17:03

对于image类型的元素，我也遇到了类似的问题。我需要检查元素是否属于特定的类。首先我尝试了:

$('<img>').hasClass("nameOfMyClass");

但我得到了一个漂亮的“这个函数不适用于这个元素”。

然后我在DOM资源管理器上检查了我的元素，我看到了一个可以使用的非常好的属性:className。它包含元素中所有类的名称，用空格分隔。

$('img').className // it contains "class1 class2 class3"

一旦你得到这个，就像往常一样分割字符串。

在我的情况下，这是有效的:

var listOfClassesOfMyElement= $('img').className.split(" ");

我假设这将与其他类型的元素(除了img)一起工作。

希望能有所帮助。

2016-10-03 13:24:39

试试这个。这将从document的所有元素中获得所有类的名称。

$(document).ready(function() {
var currentHtml="";
$('*').each(function() {
    if ($(this).hasClass('') === false) {
        var class_name = $(this).attr('class');
        if (class_name.match(/\s/g)){
            var newClasses= class_name.split(' ');
            for (var i = 0; i <= newClasses.length - 1; i++) {
                if (currentHtml.indexOf(newClasses[i]) <0) {
                    currentHtml += "."+newClasses[i]+"<br>{<br><br>}<br>"
                }
            }
        }
        else
        {
            if (currentHtml.indexOf(class_name) <0) {
                currentHtml += "."+class_name+"<br>{<br><br>}<br>"
            }
        }
    }
    else
    {
        console.log("none");
    }
});
$("#Test").html(currentHtml);

});

下面是工作示例:https://jsfiddle.net/raju_sumit/2xu1ujoy/3/

2016-01-04 07:11:53

在支持的浏览器上，你可以使用DOM元素的classList属性。