如何在香草JavaScript中将foreach函数用于列表标记

Question

I want to use for each function for getting all li elements in an array using core javascript

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

this is the code i want to convert

Answer 1

You can use querySelectorAll method to get all li elements, convert it to an array using spread syntax and finally use Array#map method to generate id array.

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

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

If you want to target the lis of specific ul .

 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

Try like this

 <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