我的 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/
非常感谢任何帮助。
谢谢!
最佳答案
每次通过循环,您都在克隆所有 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>
关于javascript - jQuery:for循环元素属性变化,所有元素都有最后一个元素属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35095282/