在 jQuery 中获取类数

在 jQuery 中获取指定元素的类数非常简单，只需使用 .attr() 方法获取 class 属性的值，然后使用 split() 方法将字符串按空格分割成数组，最后返回数组的长度即可。

示例代码

// HTML代码：
// <div class="box col-6 col-md-4">example</div>
// <div class="box col-6 col-md-4">example</div>
// <div class="box col-6 col-md-4">example</div>

// 获取 .box 元素的类数
var box = $('.box');
var classList = box.attr('class').split(' ');
var classCount = classList.length;

console.log(classCount); // 输出：3

解析

• $('.box') 选择器可以获取所有具有 .box 类名的元素。
• box.attr('class') 获取 .box 元素的 class 属性的值，值的类型是字符串。
• classList 变量使用 split() 方法将字符串按空格分割成数组。
• classCount 变量获取 classList 数组的长度，即 .box 元素的类数。

注意事项

如果使用 .attr('class').split(' ') 方法获取元素的类数组时，HTML 代码中的 class 属性必须按空格分隔，否则会导致类名错误。如下示例：

<!-- 错误写法 -->
<div class="box,col-6,col-md-4">example</div>

<!-- 正确写法 -->
<div class="box col-6 col-md-4">example</div>