您可能会认为这很容易实现,但是哦,好吧..
无论如何,我有一个元素,可以根据网站上的交互添加或删除类。
我可以使用 $(element).hasClass("myClass") 轻松检查对象是否具有特定类
但是如何在不知道其名称的情况下检查该元素是否附加有任何类。像这样的东西:
$("#mydiv").hasAtLeastOneClassPresent
{
do this
}
$("#mydiv").hasNotASingleClass
{
do that
}
最佳答案
检查classList
属性:
$("#mydiv").prop('classList').length
或者,使用 DOM:
document.querySelector('#mydiv').classList.length
如果长度为零,则没有类,如果长度大于零,则有相应数量的类。
将 DOM 作为函数:
// 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;
}
<div id="mydiv" class="hasAClass"></div>
<div id="myotherdiv"></div>
如果浏览器不具备 element.classList
接口(interface),您可以使用 className
:
// retrieving the specified element,
// retrieving its 'className' property,
// removing the leading and trailing white-space,
// retrieving the length of the trimmed string,
// checking that this length is greater than 0:
$("#mydiv").prop('className').trim().length > 0;
var div1 = $("#mydiv"),
div2 = $('#myotherdiv'),
div1HasClassName = div1.prop('className').trim().length > 0,
div2HasClassName = div2.prop('className').trim().length > 0;
// Boolean true:
if (div1HasClassName) {
div1.addClass('found');
}
// Boolean false:
if (div2HasClassName.length > 0) {
div2.addClass('found');
}
div {
height: 2em;
border: 3px solid limegreen;
margin-top: 0.5em;
border-radius: 1em 0;
}
.found {
border-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" class="a"></div>
<div id="myotherdiv"></div>
或者,使用 DOM:
// retrieving the element with the id of 'mydiv'
// (or null if no such element exists),
// retrieving the className, as a String, of the element,
// removing the leading and trailing white-space,
// retrieving the length of the String,
// evaluating whether the length is greater than 0;
// returning a Boolean true if so, false if not:
document.querySelector("#mydiv").className.trim().length > 0;
var div1 = document.querySelector("#mydiv"),
div2 = document.querySelector('#myotherdiv'),
div1HasClassName = div1.className.trim().length > 0,
div2HasClassName = div2.className.trim().length > 0;
// Boolean true:
if (div1HasClassName) {
div1.className += ' found';
}
// Boolean false:
if (div2HasClassName) {
div2.className += ' found';
}
div {
height: 2em;
border: 3px solid limegreen;
margin-top: 0.5em;
border-radius: 1em 0;
}
.found {
border-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" class="a"></div>
<div id="myotherdiv"></div>
也可以编写一个(非常)简单的 jQuery 选择器来仅选择那些具有类的元素,该选择器不接受参数:
// defining the selector-name 'hasClasses':
$.expr[':'].hasClasses = function(
// this is the current element of the collection over
// which the selector iterates:
objNode
) {
// here we return true, if:
// the current node has a 'class' attribute, and
// has a classList (though this could be substituted
// for className for backwards compatibility), and
// the classList.length is greater than zero
// Otherwise returning false:
return objNode.hasAttribute('class') && objNode.classList && objNode.classList.length > 0;
};
$('div:hasClasses').addClass('found');
$.expr[':'].hasClasses = function(
objNode
) {
return objNode.hasAttribute('class') && objNode.classList && objNode.classList.length > 0;
};
$('div:hasClasses').addClass('found');
div {
height: 2em;
border: 3px solid limegreen;
margin-top: 0.5em;
border-radius: 1em 0;
}
.found {
border-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class></div>
<div class="hasAClass"></div>
<div class=""></div>
<div></div>
<div class="hasAClass"></div>
或者类似地,一个也不带参数的 jQuery 插件:
// using an immediately-invoked function expression (IIFE),
// to immediately run the function as soon as it's encountered:
(function($) {
// defining the plugin name ('hasClasses'):
$.fn.hasClasses = function() {
// 'this', here, is the jQuery collection
// over which we're iterating with filter():
return this.filter(function() {
// we're using this node potentially three times,
// so we cache it here for simplicity ('this,' within
// the filter() method, is the DOM node):
var objNode = this;
// if the following assessment returns true the
// current node is retained in the collection and
// and retained for chaining, if it evaluates to
// false it's discarded from the collection and so
// not retained/returned:
return objNode.hasAttribute('class') && objNode.classList && objNode.classList.length > 0;
});
};
// passing in jQuery to allow the use of the $ alias
// within the IIFE:
})(jQuery);
// calling the plugin:
$('div').hasClasses().addClass('found');
(function($) {
$.fn.hasClasses = function() {
return this.filter(function() {
var objNode = this;
return objNode.hasAttribute('class') && objNode.classList && objNode.classList.length > 0;
});
};
})(jQuery);
$('div').hasClasses().addClass('found');
div {
height: 2em;
border: 3px solid limegreen;
margin-top: 0.5em;
border-radius: 1em 0;
}
.found {
border-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class></div>
<div class="hasAClass"></div>
<div class=""></div>
<div></div>
<div class="hasAClass"></div>
关于jquery - 如何检查元素是否附加了任何类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34923221/