用jQuery获取元素的类列表
有没有办法在jQuery循环或分配给一个数组的所有类分配给一个元素？
恩。
<div class="Lorem ipsum dolor_spec sit amet">Hello World!</div> 我将在上面的“dolor_spec”中寻找一个“特殊”类。 我知道我可以使用hasClass（），但实际的类名不一定是当时已知的。
你可以使用document.getElementById('divId').className.split(/\s+/); 给你一个类名的数组。
然后你可以迭代并find你想要的。
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 } });
为什么没有人简单列出。
$(element).attr("class").split(' ');
这是一个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我设置演示和testinghttp://jsfiddle.net/GD8Qn/8/
缩小的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);
在支持的浏览器上，可以使用DOM元素的classList属性。
$(element)[0].classList
它是一个类似数组的对象，列出了元素所有的类。
如果您需要支持不支持classList属性的旧浏览器版本，则链接的MDN页面也会包含一个垫片 – 尽pipe在IE 8以下的Internet Explorer版本中垫片也不起作用。
你应该试试这个：
$("selector").prop("classList")
它返回该元素的所有当前类的数组。
var classList = $(element).attr('class').split(/\s+/); $(classList).each(function(index){ //do something });
$('div').attr('class').split(' ').map(function(cls){ console.log(cls);})
用所有给定的答案，你永远不应该忘记用户.trim（）（或$ .trim（））
因为类被添加和删除，可能会出现类string之间有多个空格。例如'class1 class2 class3'..
这将变成['class1'，'class2'，''，''，''，'class3'] ..
当您使用修剪，所有多个空格被删除..
也许这可以帮助你。 我用这个函数来获取childern元素的类..
function 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(); }); }
在你的情况下，你想doler_ipsum类你可以这样做现在calsses[2]; 。
尝试这个。 这将从您的文档的所有元素中获取所有类的名称。
$(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/
感谢这个 – 我有一个类似的问题，因为我试图以编程方式将对象关联到分层类名称，即使这些名称可能不一定是我的脚本知道的。
在我的脚本中，我想要一个<a>标签通过给<a>标签[some_class]加上toggle类来打开/closures帮助文本，然后给它的帮助文本[some_class]_toggle的类。 此代码使用jQuery成功查找相关元素：
$("a.toggle").toggle(function(){toggleHelp($(this), false);}, function(){toggleHelp($(this), true);}); function toggleHelp(obj, mode){ var classList = obj.attr('class').split(/\s+/); $.each( classList, function(index, item){ if (item.indexOf("_toggle") > 0) { var targetClass = "." + item.replace("_toggle", ""); if(mode===false){$(targetClass).removeClass("off");} else{$(targetClass).addClass("off");} } }); }
javascript为dom中的一个节点元素提供了一个classList属性。 简单使用
element.classList
将返回一个forms的对象
DOMTokenList {0: "class1", 1: "class2", 2: "class3", length: 3, item: function, contains: function, add: function, remove: function…}
该对象具有包含，添加，删除，你可以使用的function
我有一个类似的问题，types图像的元素。 我需要检查元素是否属于某个类。 首先我试着用：
$('<img>').hasClass("nameOfMyClass");
但我有一个很好的“这个function不适用于这个元素”。
然后我检查了我的元素在DOM浏览器，我看到了一个非常好的属性，我可以使用：className。 它包含了由空格分隔的元素的所有类的名称。
$('img').className // it contains "class1 class2 class3"
一旦你得到这个，就像往常一样分割string。
在我的情况下，这工作：
var listOfClassesOfMyElement= $('img').className.split(" ");
我假设这将与其他types的元素（除了IMG）。
希望它有帮助。
有点迟了，但是使用extend（）函数可以让你在任何元素上调用“hasClass（）”，例如：
var hasClass = $('#divId').hasClass('someClass');
(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);
问题是Jquerydevise要做什么。
$('.dolor_spec').each(function(){ //do stuff
为什么没有人给出.find（）作为答案？
$('div').find('.dolor_spec').each(function(){ .. });
还有非IE浏览器的classList：
if element.classList.contains("dolor_spec") { //do stuff
在这里你去，只是调整了读取广场的答案返回所有类的数组：
function classList(elem){ var classList = elem.attr('class').split(/\s+/); var classes = new Array(classList.length); $.each( classList, function(index, item){ classes[index] = item; }); return classes; }
将一个jQuery元素传递给该函数，以便示例调用将是：
var myClasses = classList($('#myElement'));
我知道这是一个古老的问题，但仍然是。
<div id="specId" class="Lorem ipsum dolor_spec sit amet">Hello World!</div> var className=".dolor_spec" //dynamic
如果你想操纵元素
$("#specId"+className).addClass('whatever');
如果你想检查元素是否有类
$("#specId"+className).length>0
如果多个类
//if you want to select ONE of the classes var classNames = ['.dolor_spec','.test','.test2'] $("#specId"+classNames).addClass('whatever'); $("#specId"+classNames).length>0 //if you want to select all of the classes var result = {className: ""}; classNames.forEach(function(el){this.className+=el;},result); var searchedElement= $("#specId"+result.className); searchedElement.addClass('whatever'); searchedElement.length>0
