javascript - jQuery:for循环元素属性变化，所有元素都有最后一个元素属性

Question

我的 for 循环有点问题。我认为这应该相对容易，但出于某种原因我就是想不通!

我有一个 for 循环，它从一个列表中获取列表项并将它们克隆到另一个列表中。完成此操作后，新列表项需要一个具有 i 值的 rel 属性。

一旦循环完成，所有列表元素都会被赋予一个具有最终 i 值的 rel (3) - 如下所示。

开始 HTML

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul id="newList">

</ul>

Javascript:

for (i = 0; i < $('#list li').length; i++) {
  $('#newList').html($('#list li').clone().attr('rel', i));
}

预期输出

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul id="newList">
  <li rel="0">1</li>
  <li rel="1">2</li>
  <li rel="2">3</li>
  <li rel="3">4</li>
</ul>

实际输出

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul id="newList">
  <li rel="3">1</li>
  <li rel="3">2</li>
  <li rel="3">3</li>
  <li rel="3">4</li>
</ul>

fiddle : https://jsfiddle.net/dtxs4nxj/

非常感谢任何帮助。

谢谢!

Answer 1

每次通过循环，您都在克隆所有 li，为所有克隆提供相同的rel 属性，然后将在 #newList 的 HTML 中(替换上一次迭代中放置的内容)。相反，您应该分别克隆每一个，并将其附加到 #newList。

$("#list li").each(function(i) {
  $(this).clone().attr('rel', i).appendTo("#newList");
});
$("#html").text($("#newList").html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul id="newList">

</ul>
<br>newList HTML:
<div id="html"></div>