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

Question

I want to display all class name attributes which is inside a div. For Example :

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

The output should be as : limit-text, h1 title-cover, icon-svg hide-for-print, copy-cover . Getting all Class name attributes. I Tried

$(div).attr('class')

but its returning only one (ie) limit-text

Please help me on this.

Answer 1

You can do this :

Create an empty array to save classes. Then iterate on all tags inside the body which are not script tags.

Get classes one by one a push them into the array created a the first line.

Then log the classes.

 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

With

$(div).attr('class')

you can get the class name of the parent div - this one you have already.

Using:

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

or

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

you can get an array of all children classes.

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

Answer 3

Use children() and loop through each of them to get classnames

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