如何获取元素的类名

Question

我有一组div...

<div class='happy person'><img src='#' /></div>
<div class='fat person'><img src='#' /></div>
<div class='joyous person'><img src='#' /></div>
<div class='grotesque person'><img src='#' /></div>
<div class='sad person'><img src='#' /></div>

我已经选择了使用...

var people = $('.person')

结果存储在类变量中。 jQuery将此选择的结果存储为HTMLDivElement数组 - 它们就是这样。

稍后，我想能够查看此数组并根据每个元素的类做出一些决策。我已经阅读了可能的解决方案；但由于我没有直接处理jQuery对象，因此失败了。

如何获取数组中这些div的类名？

- Igbanam

Answer 1

这应该可以运行：

var people = $('.person');
$.each(people, function(index, el) {
    var _this = $(el);
    if (_this.hasClass('happy')) {
        alert('Happy!');
    } else if (_this.hasClass('fat')) {
        alert('Fat!');
    }
});

- Shane Garelja

Answer 2

我不确定你所说的“我没有直接处理jQuery对象”是什么意思，因为$('.person')返回一个jQuery对象，包装了一个元素数组。

要获取元素的类名，只需在jQuery对象上使用.attr('class')。将其与.map()结合使用，您可以为每个元素创建一个仅包含类名的数组：

var classes = $('.person').map(function () {
    return $(this).attr('class');
}).get();

这将产生以下数组：

['happy person', 'fat person', ..., 'sad person']

- David Tang

Answer 3

如来自http://bytes.com/topic/javascript/answers/91636-getting-class-name-string，如果您没有使用jQuery，这可能值得一试。

function getClassName(obj) {
   if (typeof obj != "object" || obj === null) return false;
   return /(\w+)\(/.exec(obj.constructor.toString())[1];
}

- vol7ron

Answer 4

div_attrs = node.attributes;
div_class = div_attrs.getNamedItem("class").value;

- yPhil

---

在 div_class 中，变量应该是 div_attrs。 - yaakov

Answer 5

使用纯JavaScript循环遍历它们：

for (var i = 0; i < people.length; i++)
{
  var class = people[i].attr('class');
}

或者使用jQuery：

people.each(function()
{
  var class = $(this).attr('class');
});

你知道吗，拥有一个类名为fat person并不是拥有fat person这个类。它会继承fat和person两个类的CSS属性。如果你需要这样的类名，请使用下划线：fat_person。

- Blender

---

谢谢。我理解CSS类的继承。在您的示例中，我将查找类“fat”，它应该返回具有类“fat”和“person”的对象。 - Igbanam

Answer 6

要获取单个 div 上的所有类，请使用 .attr 函数。

var classes = myDiv.attr('class');  

这将返回元素上所有类的以空格分隔的列表。

如果您想检查特定类是否存在，请使用 .hasClass()。

var hasJoy = myDiv.hasClass('joyous');

- calvinf

---

值得一提的是，这些是jQuery方法。 - vol7ron

没错，这些是jQuery。如果您没有可用的jQuery对象，可以直接使用DOM方法。 - calvinf

这个可以工作，但我想要获取特定DOM对象的类，而不是所有对象的类。 - Igbanam

Answer 7

$(document).click(function(e){
    var className = e.target.className;
    alert(className);
});

b{
background-color:lightgreen;
padding:10px 20px;
margin:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b class='class-one'>Class One</b>
<b class='class-two'>Class-Two</b>
<b class='class-three'>Class-Three</b>

- user3668456