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

【问题标题】：how to get all div tags class attributes using jquery如何使用jquery获取所有div标签类属性
【发布时间】：2018-04-03 18:42:15
【问题描述】：

我想显示一个 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')

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

请帮帮我。

【问题讨论】：

api.jquery.com/find。我花了 10 秒
How to retrieve class names of all child elements at multiple level in jquery?的可能重复
可能重复：stackoverflow.com/questions/38024631/…

标签： javascript jquery class attributes

【解决方案1】：

使用children() 并循环遍历它们以获取类名

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

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

【讨论】：

如果您想包含顶级 div，请更改为 .children().addBack()（对于 jquery>1.8 - 对于 jquery.andSelf()），如 OPs 示例输出中所示。

【解决方案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"]

【讨论】：

【解决方案3】：

你可以这样做：

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

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

然后记录课程。

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)

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

【讨论】：

... 它有什么作用？请注意为您的代码添加一些解释。
它创建一个空数组来保存类。然后我们迭代正文中所有不是脚本标签的标签。我们一个接一个地获取类，并将它们推入我们在第一行创建的数组中。然后我们记录类。
用描述更新你的答案；不要在 cmets 中添加它。

【解决方案4】：

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)

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

【讨论】：