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

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

你可以这样做 ：

创建一个空数组以保存类。 然后遍历体内不是脚本标签的所有标签。

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

然后记录课程。

 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> 

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()并遍历它们中的每一个以获得类名

 $('.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> 

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