jquery - 如何检查元素是不是附加了任何类

Posted 2023-03-29

【中文标题】jquery - 如何检查元素是不是附加了任何类

【英文标题】：jquery - how to check if element has any classes attached to itjquery - 如何检查元素是否附加了任何类

【发布时间】：2016-01-21 11:58:44

【问题描述】：

你会想象这很容易实现，但是哦..

无论如何，我有一个元素可以根据网站上的交互添加或删除类。

我可以使用$(element).hasClass("myClass")轻松检查对象是否具有特定类

但是我如何在不知道其名称的情况下检查元素是否附加了任何类。比如：

$("#mydiv").hasAtLeastOneClassPresent

 do this

$("#mydiv").hasNotASingleClass

 do that

【参考方案1】：

检查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>

JS Fiddle demo.

如果浏览器没有element.classList 接口，您可以改用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>

JS Fiddle demo.

或者，使用 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>

JS Fiddle demo.

也可以写一个 (very) 简单的 jQuery 选择器来只选择那些有类的元素，这个选择器接受 no 参数：

// 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>

JS Fiddle demo.

或者，类似地，一个不带参数的 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>

JS Fiddle demo.

【讨论】：

$("#mydiv").prop('className').split(/\s+/).length; 和 document.querySelector('#mydiv').className.split(/\s+/).length 如果 DOM 中没有类属性，则不会工作，，

使用纯 JS：document.querySelector('#mydiv').className，使用 jQuery：$("#mydiv")[0].className - 如果元素有任何类集，两者都是真实的

以上两点，刚刚更正；删除了split()的使用。

【参考方案2】：

在 jQuery 中：

if($("#mydiv").is('[class]')

正如YoYo 在评论中指出的那样，如果属性类设置为空字符串，这将失败。所以不要使用它...

【讨论】：

哇，伙计……你在告诉我新事物。 :) 妈的！这是 CSS。

承认我没有想到这一点有点尴尬>。

@DavidThomas 随意编辑您的答案以包含它并使您的答案更完整:)

会的，但我不想抢走你的风头；再加上你值得代表考虑这么简单的解决方案:)

这不可能是一个答案......如果 DOM 有一个空的类属性，如 <div class="" id="asda"></div>

【参考方案3】：

在 html 元素上使用 classList 属性：

document.getElementById("mydiv").classList.length
document.querySelector("#mydiv").classList.length
$("#mydiv").prop('classList').length // jQuery method.

classList 给出了该元素的类数组。所以，.length 会说那里是否有任何课程。

【参考方案4】：

请参阅下面的工作代码 sn-p：

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');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class=""></body>

【参考方案5】：

你不需要 jQuery 来实现这个。

var hasNoClass = !document.getElementById("#id").className;

if(hasNoClass) /*...*/ else /*...*/ 

使用 jQuery 的相同方法

var hasNoClass = !$("#id").className;

if(hasNoClass) /*...*/ else /*...*/ 

【讨论】：

如果我没有类属性怎么办？？ :P

【参考方案6】：

你必须检查class属性：

出席但没有上课(class="") 不存在（未定义）

.

<div id="mydiv" class="">  // with class attribute but no class
<div id="mydiv">   // even without class attribute so no class

attr = $("#mydiv").attr("class")
hasClass = (attr == undefined || attr.replace(/\s+/, '') == "" )

【讨论】：

如果我有 class=" " 两个空格键会怎样

【参考方案7】：

使用这个...

var classes = $('#mydiv').attr('class').split(/\s+/);

这将为您提供应用于元素的所有类的数组。 对于长度，您可以简单地将其扩展为

var classes = $('#mydiv').attr('class').split(/\s+/).length;

干杯

【讨论】：

不是一个答案，伙计，如果 DOM 有一个像 class="" 这样的空类，它将计数 1

@YoYo，谢谢伙计，我已经更新了我的答案，因为我有同样的错误！

同意.. 谢谢。 @YoYo

【参考方案8】：

你可以做一件事，从元素中取出所有类，然后计算类，试试下面的代码：-

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

也许对你有帮助。

【讨论】：

不是一个答案，伙计......如果我有一个像class=" "这样的属性我的意思是双空格：P