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 s，为所有克隆提供相同的rel属性，并将其放入HTML中#newList的替换（替换上一次迭代中放置的内容）。相反，您应该单独克隆每个，并将其附加到#newList。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

尝试使用.each代替 -

$('#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)
    );
});

Answer 3

您应该使用.append中的追加功能。

$('#list li')将在ul列表中选择4个itens。

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

这就是为什么我得到了first-child：
$('#list li:first-child').clone()

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);
}

此处的解决方案：

https://jsfiddle.net/alvarojoao/dtxs4nxj/3/

Answer 4

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

您是否尝试过jQuery的迭代器，每个（）？我发现它更容易阅读。

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

https://jsfiddle.net/5Lf2h6zL/1/

Answer 5

[1, 2, 3, 4, 5].forEach(function(item) { console.log(item, arguments); });

Answer 6

使用attr(function)

的另一种变体

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

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

6 个答案: