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

Question

我必须在我的网站上嵌入一些跟踪代码。因此，我有一个带有ID值的LI元素列表，我想把它放在代码片段的数组中。它们应该是数字，例如，123,456等。我想用纯JavaScript做这件事。

这是我试过的密码。我的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>

这是JavaScript代码

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

可以使用querySelectorAll选择作为选择器传递的所有匹配元素。

选择器'#itemGrid li[id]'将选择#itemGrid元素中具有id属性的所有id元素。

querySelectorAll返回一个HTML集合。迭代这个集合以获得单个元素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 2

尝尝这个

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 3

您可以通过传递HTMLCollection将您的slice转换为数组，然后可以对该数组进行map：

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>

​