Как использовать функцию foreach для тега списка в ванильном JavaScript - PullRequest
Новая
       19

Как использовать функцию foreach для тега списка в ванильном JavaScript

0 голосов
/ 08 мая 2019

Я хочу использовать для каждой функции для получения всех li элементов в массиве, используя основной javascript 

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

это код, который я хочу преобразовать

Ответы [ 3 ]

1 голос
/ 08 мая 2019

Вы можете использовать метод querySelectorAll, чтобы получить все элементы li, преобразовать его в массив, используя синтаксис распространения и, наконец, использовать метод Array#map для создать массив идентификаторов. 

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>
0 голосов
/ 08 мая 2019

Попробуйте вот так 

<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
0 голосов
/ 08 мая 2019

использовать 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>

Если вы хотите нацелиться на lis конкретного 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>
...