如何在香草JavaScript中將foreach函數用於列表標記

Question

我想為每個函數使用核心javascript獲取數組中的所有li元素

var li_arr = []
$('li').each(function(){
    li_arr.push($(this).attr("id"));
})

這是我要轉換的代碼

Answer 1

您可以使用querySelectorAll方法獲取所有li元素，使用傳播語法將其轉換為數組，最后使用Array#map方法生成id數組。

let li_arr = [...document.querySelectorAll('li')].map(ele => ele.id)

 let li_arr = [...document.querySelectorAll('li')].map(ele => ele.id) console.log(li_arr); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li id="1">Item 1</li> <li id="2">Item 2</li> <li id="3">Item 3</li> </ul> 

Answer 2

使用document.querySelectorAll('li') 。

 const lis = document.querySelectorAll('li'); lis.forEach((li) => { console.log(li.id); }); 

 <li id="1">Item 1</li> <li id="2">Item 2</li> <li id="3">Item 3</li> 

如果要針對特定ul的lis 。

 console.log([...document.querySelectorAll('ul#list>li')].map(el => el.id)); 

 <ul id="list"> <li id="1">Item 1</li> <li id="2">Item 2</li> <li id="3">Item 3</li> </ul> 

Answer 3

這樣嘗試

 <script> var all = document.getElementsByTagName("li"); var li_arr = [] for (var i=0, max=all.length; i < max; i++) { li_arr.push(all[i].getAttribute("id")) } console.log(li_arr) </script> 

 <ul> <li id="1">Item 1</li> <li id="2">Item 2</li> <li id="3">Item 3</li> <li id="4">Item 4</li> </ul