jquery – 如何检查元素是否附加了任何类
你会想象这很容易实现，但是很好..
无论如何，我有一个元素，根据网站上的交互添加或删除类。
我可以使用$(element).hasClass("myClass")轻松检查对象是否具有特定的类
但是如何在不知道其名称的情况下检查元素是否附加了任何类。 就像是：
$("#mydiv").hasAtLeastOneClassPresent { do this } $("#mydiv").hasNotASingleClass { do that }
检查classList属性：
$("#mydiv").prop('classList').length
或者，使用DOM：
document.querySelector('#mydiv').classList.length
如果长度为零，则它没有类，如果它大于零，则它具有该类的数量。
以DOM为function：
// a named function to take a DOM node: function hasClasses(node) { // returns a Boolean, true if the length // of the Array-like Element.classList is // greater than 0, false otherwise: return node.classList.length > 0; } var elem = document.getElementById('mydiv'); if (hasClasses(elem)) { elem.classList.add('found'); }
function hasClasses(node) { return node.classList.length > 0; } var elem1 = document.getElementById('mydiv'), elem2 = document.getElementById('myotherdiv'); if (hasClasses(elem1)) { elem1.classList.add('found'); } if (hasClasses(elem2)) { elem2.classList.add('found'); }
div { height: 2em; border: 3px solid limegreen; margin-top: 0.5em; border-radius: 1em 0; } .found { border-color: orange; }
在jQuery中：
if($("#mydiv").is('[class]')
正如YoYo在评论中指出的那样，如果属性类为空字符串集，则会失败。 所以不要用它……
在HTML元素上使用classList属性：
document.getElementById("mydiv").classList.length document.querySelector("#mydiv").classList.length $("#mydiv").prop('classList').length // jQuery method.
classList给出了元素的类数组。 所以， .length会说那里有没有课。
请参阅下面的工作代码段：
var elemClasses = $('body').attr('class') ? $('body').attr('class').split(/\s+/) : []; if (elemClasses.length == 1){ alert('Only one class'); } else{ alert('Element has ' + elemClasses.length + ' clases'); }
你不需要jQuery来实现这个目标。
var hasNoClass = !document.getElementById("#id").className; if(hasNoClass){ /*...*/ }else{ /*...*/ }
使用jQuery的方法相同
var hasNoClass = !$("#id").className; if(hasNoClass){ /*...*/ }else{ /*...*/ }
您必须检查class属性是否：
- 现在但没有课（class =“”）
- 不存在（未定义）
。
// with class attribute but no class // even without class attribute so no class attr = $("#mydiv").attr("class") hasClass = (attr == undefined || attr.replace(/\s+/, '') == "" )
用这个…
var classes = $('#mydiv').attr('class').split(/\s+/);
这将为您提供应用于元素的所有类的数组。 对于长度，您可以简单地将其扩展为
var classes = $('#mydiv').attr('class').split(/\s+/).length;
干杯
你可以做一件事从元素中取出所有类然后计算类，尝试下面的代码： –
var myClass = $("#mydiv").attr("class"); var myClassArray; var myClassCount; if (myClass != "") { myClassArray = myClass.split(" "); myClassCount = myClassArray.length(); } else { myClassCount = 0; } console.log(myClassCount); // Number of class attached to that element
它可能会帮助你。