1

ここにいくつかのコードがありますが、forループが期待どおりに機能しない理由を誰かに教えてもらえますか？

$(function(){
    var details = $("<li> New list item</li>")
    for( i=0; i<3;i++){
        $('#list').append(details);
        console.log(i);     
    };
});

これにより、3つの新しいリストアイテムが追加されることを期待しています。しかし、それは1つ追加し、その後何も追加しません... console.logは3回出力しますが、なぜ追加が3回行われないのですか？

コードは役に立ちません。私はjQueryを学んでいて、なぜこれが機能しないのかを理解したいと思っていました。

4

2 に答える 2

2

DOM要素が別の要素に追加されると、実際には元の場所から削除され、新しい場所に挿入されます。たとえば、次のHTMLコードがあるとします。

<div id="p1">
    <div id="c1">Child</div>
</div>
<div id="p2">
</div>

そして、次のJavaScriptコードを実行します。

$('#p2').append($('#c1'));

次に、結果のHTMLは次のようになります。

<div id="p1">
</div>
<div id="p2">
    <div id="c1">Child</div>
</div>

これが、最初の反復後にループがリストに新しいアイテムを追加しない理由です。これは、DOM要素を既存の場所と同じ場所に再配置するためです。リストに新しいアイテムを挿入するには、Samが提案するように実行し、リストに追加する前に元のアイテムのクローンを作成する必要があります。

$('#list').append(details.clone());
于 2013-02-28T00:54:15.867 に答える
0

クローンするだけ

$(function(){
var details = $("<li> New list item</li>");
for( i=0; i<3;i++){
    $('#list').append(details.clone());
    console.log(i);     
 };
});
于 2013-02-28T00:33:45.810 に答える