Javascript jQuery：对于循环元素attr change，所有元素都有最后一个元素attr

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

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

循环完成后，所有列表元素都会得到一个rel，其最终i值为3，如下所示

启动HTML

Javascript:

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

预期产量

实际产量

小提琴：

任何帮助都将不胜感激

---

谢谢

每次通过循环，您都要克隆所有的lis，为所有克隆赋予相同的rel属性，并将其放入newList的HTML中，以替换上一次迭代中的内容。相反，您应该分别克隆每一个，并将其附加到newList

$list li.eachfunctioni{ $this.clone.attr'rel'，i.appendTonewList； }; $html.text$newList.html； 1. 2. 3. 4. 新列表HTML：

---

每次通过循环，您都要克隆所有的lis，为所有克隆赋予相同的rel属性，并将其放入newList的HTML中，替换上一次迭代中的内容。相反，您应该分别克隆每一个，并将其附加到newList

$list li.eachfunctioni{ $this.clone.attr'rel'，i.appendTonewList； }; $html.text$newList.html； 1. 2. 3. 4. 新列表HTML：

---

您的问题是，每次循环都会用列表中所有li的克隆替换newList的内容。这意味着您将看到for循环的最终迭代结果

试着用每一个-

$('#list li').each (function (index, me){
    // "index" is the index of the li and "me" is the li itself
    // "append" will add the cloned element to the end of "#newList"
    $('#newList').append(
        $(me).clone().attr('rel', index)
    );
});

---

您的问题是，每次循环都会用列表中所有li的克隆替换newList的内容。这意味着您将看到for循环的最终迭代结果

试着用每一个-

$('#list li').each (function (index, me){
    // "index" is the index of the li and "me" is the li itself
    // "append" will add the cloned element to the end of "#newList"
    $('#newList').append(
        $(me).clone().attr('rel', index)
    );
});

---

您应该使用.append中的append函数

$'list li'将选择ul列表中的4个ITEN

解决方案如下：

---

您应该使用.append中的append函数

$'list li'将选择ul列表中的4个ITEN

解决方案如下：

---

在每次迭代中，您的代码将用整个克隆列表替换newList的内容，并最后设置rel属性，因此每个克隆的li都将应用相同的rel属性

每个人都试过jQuery的迭代器吗？我发现它更容易阅读

$("ul#list li").each(
function(i,v){
    $(v).clone().attr("rel",i.toString()).appendTo("ul#newList");
}
);

---

在每次迭代中，您的代码将用整个克隆列表替换newList的内容，并最后设置rel属性，因此每个克隆的li都将应用相同的rel属性

每个人都试过jQuery的迭代器吗？我发现它更容易阅读

$("ul#list li").each(
function(i,v){
    $(v).clone().attr("rel",i.toString()).appendTo("ul#newList");
}
);

使用属性函数的另一种变体

使用属性函数的另一种变体

---

@Nick请看我的答案，我在最容易适应的过程中更新了解决方案。为什么每次都克隆第一个孩子，而不是克隆原始列表中的每个孩子？@Nick请看我的答案，我在最容易适应的过程中更新了解决方案。为什么每次都克隆第一个孩子，与其克隆原始列表中的每个子元素，还不如在这里认识到$'newList'.html$'list li'是一个jQuery元素数组。因为它代表整个数组，并且循环到达它的末尾，所以最后一个值3将指向所有元素。无论如何，您应该在jQuery中使用.each或$.each而不是常规for循环。这里要了解的重要一点是$'newList'.html$'list li'是一个jQuery元素数组。因为它代表整个数组，并且循环到达它的末尾，所以最后一个值3将指向所有元素。您应该使用.each或$.each，而不是jQuery中的常规for循环。无需调用.toString，当您将一个数字放入属性时，它会自动完成。否则，这与我的答案基本相同。无需调用。toString，当您将数字放入属性时，它会自动完成。否则，这与我的答案基本相同。

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

for (var i = 0; i < $('#list li').length; i++) {
  var newLi = $('#list li:first-child').clone();
  newLi.html(i+1)
  newLi.attr('rel', i+1);
  $('#newList').append(newLi);
}

$("ul#list li").each(
function(i,v){
    $(v).clone().attr("rel",i.toString()).appendTo("ul#newList");
}
);

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

$('#newList').append($('#list li').clone().attr('rel', function( i){
  return i;
}));