jQuery中有没有办法循环遍历或分配给数组的所有分配给元素的类?
前任。
<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
}
});
为什么没有人简单列出。
$(element).attr("class").split(/\s+/);
编辑:拆分 /\s+/
而不是 ' '
以解决 @MarkAmery 的反对意见。 (谢谢@YashaOlatoto。)
$('<div class="foo bar baz">').attr("class").split(' ')
粘贴到您的浏览器控制台(那里有一个制表符);您将获得 ["foo", "bar baz"]
而不是 ["foo", "bar", "baz"]
的正确班级列表。
class="foo <lots of spaces here> bar"
,您最终会得到一个包含空字符串元素的数组。
在支持的浏览器上,您可以使用 DOM 元素的 classList
属性。
$(element)[0].classList
它是一个类似数组的对象,列出了元素所具有的所有类。
如果您需要支持不支持 classList
属性的旧浏览器版本,则链接的 MDN 页面还包含一个 shim - 尽管即使 shim 也无法在低于 IE 8 的 Internet Explorer 版本上工作。
.classList
不是真正的数组,.indexOf(⋯)
之类的方法对它不起作用。它只是一个“类似数组的对象”,而 .className.split(/\s+/).indexOf(⋯)
(来自已接受的答案)有效。
[...iterable]
或 Array.from(iterable)
轻松地将任何可迭代对象转换为 Array
这是一个 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/
缩小的 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);
你应该试试这个:
$("selector").prop("classList")
它返回元素的所有当前类的列表。
.classList
是解决方案 - 你只需要注意不一致和/或缺少浏览器支持..
.classList
它在现代浏览器中运行良好
classList
属性不适用于 IE 10/11 的 SVG 元素(尽管它适用于 HTML 元素)。请参阅developer.mozilla.org/en-US/docs/Web/API/Element/classList
var classList = $(element).attr('class').split(/\s+/);
$(classList).each(function(index){
//do something
});
更新:
正如@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']..
当您使用修剪时,所有多个空格都会被删除..
.classList
是一种更简洁的方法!
$('div').attr('class').split(' ').each(function(cls){ console.log(cls);})
.map
的可怕滥用;如果您不需要 .map
的返回值,请使用 .each
。拆分空格而不是任何空格也会被破坏 - 请参阅我对 stackoverflow.com/a/10159062/1709587 的评论。即使这些观点都不成立,这也不会为页面增加任何新内容。 -1!
也许这也可以帮助你。我已经使用这个函数来获取子元素的类..
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];
。
谢谢你 - 我遇到了类似的问题,因为我试图以编程方式将对象与分层类名称相关联,即使我的脚本可能不一定知道这些名称。
在我的脚本中,我想要一个 <a>
标记来打开/关闭帮助文本,方法是给 <a>
标记 [some_class]
加上 toggle
类,然后给它的帮助文本 [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");}
}
});
}
尝试这个。这将为您从文档的所有元素中获取所有类的名称。
$(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/
为了获取应用于元素的类列表,我们可以使用
$('#elementID').prop('classList')
对于添加或删除任何类,我们可以按照以下方式进行操作。
$('#elementID').prop('classList').add('yourClassName')
$('#elementID').prop('classList').remove('yourClassName')
为了简单地检查类是否存在,我们可以使用 hasClass
对于图像类型的元素,我遇到了类似的问题。我需要检查元素是否属于某个类。首先我尝试了:
$('<img>').hasClass("nameOfMyClass");
但我得到了一个很好的“此功能不适用于此元素”。
然后我在 DOM 浏览器上检查了我的元素,我看到了一个可以使用的非常好的属性:className。它包含我的元素的所有类的名称,由空格分隔。
$('img').className // it contains "class1 class2 class3"
一旦你得到这个,就像往常一样拆分字符串。
就我而言,这有效:
var listOfClassesOfMyElement= $('img').className.split(" ");
我假设这将适用于其他类型的元素(除了 img)。
希望能帮助到你。
javascript 为 dom 中的节点元素提供了一个 classList 属性。只需使用
element.classList
将返回一个形式的对象
DOMTokenList {0: "class1", 1: "class2", 2: "class3", length: 3, item: function, contains: function, add: function, remove: function…}
该对象具有包含、添加、删除等功能,您可以使用这些功能
有点晚了,但是使用 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);
问题是 Jquery 的设计目的是什么。
$('.dolor_spec').each(function(){ //do stuff
为什么没有人给出 .find() 作为答案?
$('div').find('.dolor_spec').each(function(){
..
});
还有非 IE 浏览器的 classList:
if element.classList.contains("dolor_spec") { //do stuff
$.fn.classList = function() {return this[0].className.split(/\s+/);};