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将此选择的结果存储为HTMLDivElements数组 - 它们是。

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

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

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

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']

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];
}

Answer 4

使用纯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。

Answer 5

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

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

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

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

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

Answer 6

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

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>

如何获取元素的类名

7 个答案: