如何使用javascript向列表中的所有li添加ID

Question

<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。我是新人，期待着帮助每个人

http://jsfiddle.net/8XN8j/32/

Answer 1

使用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>

Answer 2

您应该将回调函数传递给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) => {
	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>

http://jsfiddle.net/hidingmode/Ltkoe8y0/1/

Answer 3

只需使用如下。

＆＃13;

＆＃13;

const list = document.querySelectorAll(".list li");

for (var i = 0; i < list.length; i++) {
  const li = list[i];
  li.id = `item-${i}`;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;