<div class="Lorem ipsum dolor_spec sit amet">Hello World!</div>
我将寻找一个类似于上面的 "dolor_spec" 的“特殊”类。我知道我可以使用 hasClass()，但实际的类名可能在此时并不确定。
document.getElementById('divId').className.split(/\s+/);来获取一个类名数组。var classList = document.getElementById('divId').className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
if (classList[i] === 'someClass') {
//do something
}
}
jQuery在这里并没有真正帮助到你...
var classList = $('#divId').attr('class').split(/\s+/);
$.each(classList, function(index, item) {
if (item === 'someClass') {
//do something
}
});
您可以使用
if ($('#divId').hasClass('someClass')) {
//do something
}
$.fn.classList = function() {return this[0].className.split(/\s+/);};。该插件可用于获取元素的类名列表。 - ripper234为什么没有人简单地列出呢？
$(element).attr("class").split(/\s+/);
编辑：为了解决@MarkAmery的反对意见，将分隔符从' '改为/\s+/。（感谢@YashaOlatoto）。
$('<div class="foo bar baz">').attr("class").split(' ')粘贴到您的浏览器控制台中（其中有一个制表符）；您会得到["foo", "bar baz"]而不是正确的类列表["foo", "bar", "baz"]。 - Mark Ameryclass="foo <lots of spaces here> bar"，你最终会得到一个带有空字符串元素的数组。 - Jacob van Lingen在支持的浏览器中，您可以使用DOM元素的classList属性。
$(element)[0].classList
它是一个类似于数组的对象，列出了元素拥有的所有类。
如果需要支持不支持classList属性的旧浏览器版本，则链接的MDN页面还包括其的替代方法 - 尽管即使在IE 8以下的版本中，该替代方法也无法工作。
.classList不是真正的数组，因此.indexOf(⋯)等方法无法在其上工作。它只是一个“类似数组的对象”，而.className.split(/\s+/).indexOf(⋯)（来自接受的答案）可以工作。 - Incnis Mrsi[...iterable] 或 Array.from(iterable) 将任何可迭代对象轻松转换为 Array。 - Marco Sulla这是一个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
}
);
这是我准备的一个jsFiddle，用于演示和测试http://jsfiddle.net/GD8Qn/8/
;!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);
你应该尝试这一个：
$("selector").prop("classList")
它返回该元素的所有当前类的列表。
.classList就是解决方案 - 您只需要注意不一致性和/或缺少的浏览器支持。 - Dennis98.classList，在现代浏览器中效果非常好。 - RozzAclassList 属性在 IE 10/11 上不适用于 SVG 元素（尽管对 HTML 元素适用）。请参见 https://developer.mozilla.org/en-US/docs/Web/API/Element/classList。 - Métoulevar classList = $(element).attr('class').split(/\s+/);
$(classList).each(function(index){
//do something
});
$('div').attr('class').split(' ').each(function(cls){ console.log(cls);})
.map的可怕滥用；如果您不需要.map的返回值，请使用.each。将字符串按空格拆分而不是任何空白也是错误的 - 请参见我在https://dev59.com/bHM_5IYBdhLWcg3wymY0#10159062上的评论。即使这些观点都不正确，这也不会为页面添加任何新内容。-1！ - Mark Amery更新：
正如@Ryan Leonard正确指出的那样，我的答案并没有真正解决我自己提出的问题...你需要使用（例如）string.replace(/ +/g, " ")同时修剪和删除双空格...或者你可以分割el.className，然后使用（例如）arr.filter(Boolean)删除空值。
const classes = element.className.split(' ').filter(Boolean);
const classes = element.classList;
新的翻译:
在所有给出的答案中，您不应忘记使用.trim()（或$.trim()）。
因为类会添加和删除，所以在类字符串之间可能会有多个空格。例如，'class1 class2 class3'。
这将变成 ['class1'，'class2'，''，''，''，'class3']。
当您使用 trim 时，所有多个空格都将被删除。
.classList 是一种更加简洁的方法！ - Ryan Leonardfunction getClickClicked(){
var clickedElement=null;
var classes = null;<--- this is array
ELEMENT.on("click",function(e){//<-- where element can div,p span, or any id also a class
clickedElement = $(e.target);
classes = clickedElement.attr("class").split(" ");
for(var i = 0; i<classes.length;i++){
console.log(classes[i]);
}
e.preventDefault();
});
}
calsses[2];。我们可以使用以下方法获取应用于元素的类列表：
$('#elementID').prop('classList')
如果要添加或删除任何类，我们可以按照以下方式进行操作。
$('#elementID').prop('classList').add('yourClassName')
$('#elementID').prop('classList').remove('yourClassName')
如果只是检查类是否存在，我们可以使用 hasClass 方法。