CODEWITHSUNDEEP
javascript
Diesal11
Diesal11

Reputation: 3427

Get all LI elements in array

How can i make JS select every LI element inside a UL tag and put them into an array?

<div id="navbar">
    <ul>
        <li id="navbar-One">One</li>
        <li id="navbar-Two">Two</li>
        <li id="navbar-Three">Three</li>
        <li id="navbar-Four">Four</li>
        <li id="navbar-Five">Five</li>
    </ul>
</div>

Can i make it so JS gets each of them into an array eg navbar['0'] would return document.getElementById("navbar-One")?

Upvotes: 47

Views: 163760

Answers (5)

Lithika Damnod
Lithika Damnod

Reputation: 21

var allElmnts = document.querySelectorAll("ul");
var arr = []; 
arr.length = allElmnts.length; 
for(var i = 0; i < allElmnts.length; i++){

    arr[i] = allElmnts[i]; 

}

Upvotes: 1

NIKITA SINGHANIA
NIKITA SINGHANIA

Reputation: 11

If you want all the li tags in an array even when they are in different ul tags then you can simply do

var lis = document.getElementByTagName('li');

and if you want to get particular div tag li's then:

var lis = document.getElementById('divID').getElementByTagName('li');

else if you want to search a ul first and then its li tags then you can do:

var uls = document.getElementsByTagName('ul');
for(var i=0;i<uls.length;i++){
    var lis=uls[i].getElementsByTagName('li');
    for(var j=0;j<lis.length;j++){
        console.log(lis[j].innerHTML);
    }
}

Upvotes: 1

Vectrobyte
Vectrobyte

Reputation: 1475

QuerySelectorAll will get all the matching elements with defined selector. Here on the example I've used element's name(li tag) to get all of the li present inside the div with navbar element.

    let navbar = document
      .getElementById("navbar")
      .querySelectorAll('li');

    navbar.forEach((item, index) => {
      console.log({ index, item })
    });
   
<div id="navbar">
	<ul>
		<li id="navbar-One">One</li>
		<li id="navbar-Two">Two</li>
		<li id="navbar-Three">Three</li>
		<li id="navbar-Four">Four</li>
		<li id="navbar-Five">Five</li>
	</ul>
</div>

Upvotes: 9

trincot
trincot

Reputation: 350272

After some years have passed, you can do that now with ES6 Array.from (or spread syntax):

const navbar = Array.from(document.querySelectorAll('#navbar>ul>li'));
console.log('Get first: ', navbar[0].textContent);

// If you need to iterate once over all these nodes, you can use the callback function:
console.log('Iterate with Array.from callback argument:');
Array.from(document.querySelectorAll('#navbar>ul>li'),li => console.log(li.textContent))

// ... or a for...of loop:
console.log('Iterate with for...of:');
for (const li of document.querySelectorAll('#navbar>ul>li')) {
    console.log(li.textContent);
}
.as-console-wrapper { max-height: 100% !important; top: 0; }
<div id="navbar">
  <ul>
    <li id="navbar-One">One</li>
    <li id="navbar-Two">Two</li>
    <li id="navbar-Three">Three</li>
  </ul>
</div>

Upvotes: 31

Nick Craver
Nick Craver

Reputation: 630409

You can get a NodeList to iterate through by using getElementsByTagName(), like this:

var lis = document.getElementById("navbar").getElementsByTagName("li");

You can test it out here. This is a NodeList not an array, but it does have a .length and you can iterate over it like an array.

Upvotes: 82

Related Questions