<ul class="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
<li class="item">Item 5</li>
<li class="item">Item 6</li>
</ul>
我想爲所有li標記添加ID，使用純javascript。我新，期待着能夠幫助大家如何使用javascript將ID添加到列表中的所有li
獲取使用Document#querySelectorAll方法中的所有元素，然後轉換成的NodeList陣列使用Array#forEach方法迭代。
// get all elements
var element = document.querySelectorAll('.list li');
// convert NodeList into an array
// for older browser use [].slice.call(element)
Array.from(element)
// iterate over the element
.forEach(function(ele, i) {
// generate and set id
ele.setAttribute("id", 'item' + (i + 1));
})#red {
color: red;
}
#item1 {
color: red;
}
#item2 {
color: blue;
}<ul class="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
<li class="item">Item 5</li>
<li class="item">Item 6</li>
</ul>如下簡單地使用。
const list = document.querySelectorAll(".list li");
for (var i = 0; i < list.length; i++) {
const li = list[i];
li.id = `item-${i}`;
}<ul class="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
<li class="item">Item 5</li>
<li class="item">Item 6</li>
</ul>你應該傳遞一個回調函數在foreach功能。有關更多信息，請參閱https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach。 這就是你如何使用ES6來完成的。
var element = document.querySelectorAll('.list li');
element.forEach((e, i) => {
\t e.setAttribute("id", 'item'+(i+1));
});#red {
color: red;
}
#item1 {
color: red;
}
#item2 {
color: blue;
}<ul class="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
<li class="item">Item 5</li>
<li class="item">Item 6</li>
</ul>
你想在代碼或什麼動態添加ID？請告訴我你的代碼。我無法訪問jsfiddle – nhoxbypass
始終在此處包含代碼的相關部分，用戶不必去輔助站點查看它 –
是的。自動喜歡。每個jquery。但我使用純JavaScript。我不知道如何編碼。 –