Question

确定。我想在主div中获得div的所有类名。

如何才能获得div中所有div类？

例如：

<div id="themaindiv">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>

现在，我想得到div中所有div的所有类名，名为“themaindiv”，但我不知道该怎么做。

更新：然后将那些被函数挂钩的类名显示到指定的div（'#theclassnames'）中。

应该是结果的例子。

<div id="theclassnames">div1 div2 div3 div4</div>

提前感谢。

Answer 1

假设您想要获取div的后代的每个#themaindiv的类名数组，您可以使用map获取每个元素的类名和get获取数组：

var arrayOfClassNames = $("#themaindiv div").map(function() {
    return this.className;
}).get();

这是working example。

一些注意事项：

使用普通的CSS选择器会更快，例如#themaindiv div使用find方法，而不是像其他一些答案中所做的那样。
使用原生className属性比将this传递给jQuery并使用attr或prop方法更快。
如果您不关心最终使用jQuery实例而不是本机数组，则可以省略对get的调用。

<强>更新

显然，您现在想要在另一个div中显示这些类名。最简单的方法是简单地使用text方法并传入数组：

$("#theclassnames").text(arrayOfClassNames);

这会将#theclassnames的文本内容设置为该数组的字符串表示形式。在你的情况下，将是“div1，div2，div3”。你可以see it in action here。

要完全按照您现在在问题中显示的方式显示它，您只需join数组中的空格：

$("#theclassnames").text(arrayOfClassNames.join(" ");

这是another working example。

Answer 2

$("#themaindiv div").each(function(){
    alert($(this).attr("class"));
});

Answer 3

怎么样：

$('#themaindiv div').each(function(){
    console.log($(this).attr('class'));
})

Answer 4

var classes = [];

$('#themaindiv').find('div').each(function(){
    classes.push(this.className);
});

要显示它们，您可以添加另一个div：

   <div id=theclassnames></div>

做一些像

这样的事情

$('#theclassnames').html(classes.join(' '));

但大多数js编码员只会做console.log(classes);

Answer 5

演示 http://jsfiddle.net/Fb3bN/11/

<强>码

$('#themaindiv').find('div').each(function(){
    alert($(this).prop('class'));
});

Answer 6

var arrayOfClassNames = [];
$("#themaindiv div").attr('class', function() {
  arrayOfClassNames.push(this.className);
});
console.log(arrayOfClassNames);

<强> DEMO

获取div中所有元素的类

6 个答案: