Question

我想显示div中的所有类名属性。例如：

<div class="limit-text">
  <h1 class="h1 title-cover">Title</h1>
  <img src="image.jpg" class="icon-svg hide-for-print" alt="image">
  <h3 class="copy-cover">Lorem Ipsum</h3>
</div>

输出应为：limit-text, h1 title-cover, icon-svg hide-for-print, copy-cover。获取所有类名称属性。我试过

$(div).attr('class')

但它只返回一个（即）限制文本

请帮我解决这个问题。

Answer 1

你可以这样做：

创建一个空数组来保存类。然后迭代正文中不是脚本标记的所有标记。

逐个获取类，将它们推入创建第一行的数组中。

然后记录课程。

＆＃13;

var classes = [];

$('body *:not(script)').each(function(){
  _classes = $(this).attr('class') ? $(this).attr('class').split(' ') : []
  _classes.forEach(function(entry){
    if(classes.indexOf(entry) < 0){
      classes.push(entry)
    }
  })
})

console.log(classes)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="limit-text">
  <h1 class="h1 title-cover">Title</h1>
  <img src="image.jpg" class="icon-svg hide-for-print" alt="image">
  <h3 class="copy-cover">Lorem Ipsum</h3>
</div>

＆＃13;

Answer 2

使用

$(div).attr('class')

你可以得到父div的类名 - 你已经拥有了。

使用：

$(div).find('[class]').toArray().map(child => $(child).attr('class'))

或

$(div).find('[class]').toArray().map(child => child.className)

您可以获得所有子课程的数组。

["h1 title-cover", "icon-svg hide-for-print", "copy-cover"]

Answer 3

使用children()并循环浏览每个文件以获取类名

＆＃13;

$('.limit-text').children().andSelf().each(function(){
  console.log($(this).attr('class'))
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="limit-text">
  <h1 class="h1 title-cover">Title</h1>
  <img src="image.jpg" class="icon-svg hide-for-print" alt="image">
  <h3 class="copy-cover">Lorem Ipsum</h3>
</div>

＆＃13;

Answer 4

＆＃13;

var div= document.getElementsByTagName('div')[0].getAttribute("class");
var h1 = document.getElementsByTagName('h1')[0].getAttribute("class");
var img = document.getElementsByTagName('img')
[0].getAttribute("class");
var h3 = document.getElementsByTagName('h3')
[0].getAttribute("class");
var result = document.getElementById('result').innerHTML = `${div}, ${h1}, ${img} ,${h3}`;
//or
console.log(result)

＆＃13;

<div class="limit-text">
  <h1 class="h1 title-cover">Title</h1>
  <img src="image.jpg" class="icon-svg hide-for-print" alt="image">
  <h3 class="copy-cover">Lorem Ipsum</h3>
</div>

<p id='result'></p>

＆＃13;

如何使用jquery获取所有div标签类属性

4 个答案: