jQuery中是否有一种方法可以循环遍历或分配给数组中所有被分配给元素的类?
ex.
<div class="Lorem ipsum dolor_spec sit amet">Hello World!</div>
我将寻找一个“特殊”类,如上面的“dolor_spec”。我知道我可以使用hasClass(),但实际的类名可能并不一定知道。
jQuery中是否有一种方法可以循环遍历或分配给数组中所有被分配给元素的类?
ex.
<div class="Lorem ipsum dolor_spec sit amet">Hello World!</div>
我将寻找一个“特殊”类,如上面的“dolor_spec”。我知道我可以使用hasClass(),但实际的类名可能并不一定知道。
当前回答
下面是一个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);
其他回答
var classList = $(element).attr('class').split(/\s+/);
$(classList).each(function(index){
//do something
});
也许这个也能帮到你。我已经使用这个函数来获取子元素的类。
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类,你可以这样做,现在类[2];。
对于image类型的元素,我也遇到了类似的问题。我需要检查元素是否属于特定的类。首先我尝试了:
$('<img>').hasClass("nameOfMyClass");
但我得到了一个漂亮的“这个函数不适用于这个元素”。
然后我在DOM资源管理器上检查了我的元素,我看到了一个可以使用的非常好的属性:className。它包含元素中所有类的名称,用空格分隔。
$('img').className // it contains "class1 class2 class3"
一旦你得到这个,就像往常一样分割字符串。
在我的情况下,这是有效的:
var listOfClassesOfMyElement= $('img').className.split(" ");
我假设这将与其他类型的元素(除了img)一起工作。
希望能有所帮助。
在支持的浏览器上,你可以使用DOM元素的classList属性。
$(element)[0].classList
它是一个类似数组的对象,列出元素的所有类。
如果您需要支持不支持classList属性的旧浏览器版本,则链接的MDN页面还为它包含了一个shim -尽管即使是shim也不能在ie8以下的Internet Explorer版本上工作。
试试这个。这将从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/