如何使用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>