如何获取所有LI UL元素ID值并将它们放置在JavaScript数组中？

Question

I have to embed some tracking code on my site. So I have a list of LI elements with an ID value that I want to place inside an array of the snippet. They should be numeric like, 123, 456, etc inside an object. I want to do it in pure JavaScript.

This is my code I have tried. My HTML:

<ul id="itemGrid">  
    <li class="item" id="1080">  product code </li>
    <li class="item" id="1487">  product code </li>    
    <li class="item" id="1488">  product code </li>
    ...
</ul>

This is the JavaScript code

// Get all LI items and get the ID of them in the object viewList
var catId = document.getElementById('itemGrid').getElementsByTagName('li');

window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
        // SHOULD BE LIKE THIS
        // { event: "viewList", item: ["First item id", "Second item id", "Third item id"] }
        // My actual code
        { event: "viewList", item: [ catId[].id ] }
);

Answer 1

try this

var lis = document.getElementById('itemGrid').getElementsByTagName('li');
var idArray = [];
for ( var counter = 0; counter < lis.length; counter++)
{
   idArray.push( lis[ counter ].id );
}
console.log( idArray );

Answer 2

You can use querySelectorAll to select all the matching elements passed as selector.

The selector '#itemGrid li[id]' will select all the <li> elements inside #itemGrid element having id attribute on it.

The querySelectorAll returns a collection of HTML elements. Iterate over this collection to get the individual element id.

 var lis = document.querySelectorAll('#itemGrid li[id]'); var arr = []; for (var i = 0; i < lis.length; i++) { arr.push(+lis[i].id); } console.log(arr); document.write('<pre>' + JSON.stringify(arr, 0, 4) + '</pre>'); 

 <ul id="itemGrid"> <li class="item" id="1080">1080</li> <li class="item" id="1487">1487</li> <li class="item" id="1488">1488</li> </ul> <hr /> 

Answer 3

You can convert your HTMLCollection to an Array by passing it through slice , and you can then map that array:

catId = Array.prototype.slice.call(catId).map(function(li) { return li.id; });

---

 var catId = document.getElementById('itemGrid').getElementsByTagName('li'); catId = Array.prototype.slice.call(catId).map(function(li) { return li.id; }); document.write(catId); 

 <ul id="itemGrid"> <li class="item" id="1080"> product code </li> <li class="item" id="1487"> product code </li> <li class="item" id="1488"> product code </li> </ul> 

Answer 4

var lis = document.getElementById('itemGrid').getElementsByTagName('li');
var arr = [];

// You need to iterate the list lis
[].forEach.call( lis, function(el){
     arr.push( el.id );
});

// Making the object you want
var criteo_q = { event: "viewList", item: arr };
console.log(criteo_q);

To iterate the list of DOM elements, you can also use