jqueryが正しいノードにdivを追加していません

Question

var out = []; 
out.push('<div class="newData">'); 

for (var i = 0; i < 5; i++) { 
    out.push('<img src="' + data.data[i].images.low_resolution.url + '"/>'); 
    count++; 

    // if (data.pagination.next_url = "") flag++; 

    if (count > 4) { 
     myurl = data.pagination.next_url; 
     count = 0; 
    } 

    out.push('</div>'); 
    $('#wrap').append(out); 

私はこの単純なコードを持っていますが、それが示す要素を検査しています。

<div id="wrap"> 
    <div class="newdata"></div> 
    <img scr='"asd"/> 
    <img scr='"asd"/> 
    <img scr='"asd"/> 
</div> 

なぜすぐnewdataのdivを閉じていて、なぜそれで写真を入れていませんか？文字列を使用して

Answer 1

てみ、あなたがforループの外側のdiv '<div class="newData">'スタートを持っているループ

var out = ''; 
out+='<div class="newData">'; 

for (var i = 0; i < 5; i++) { 
    out+='<img src="' + data.data[i].images.low_resolution.url + '"/>'; 
    count++; 

    // if (data.pagination.next_url = "") flag++; 

    if (count > 4) { 
     myurl = data.pagination.next_url; 
     count = 0; 
    } 
} 
    out+='</div>'; 
    $('#wrap').append(out); 

Answer 2

のために閉鎖することを忘れないでください、あなたはforループ内で閉じます。その後、ループ内に追加します。 #wrapに追加すると、有効なhtmlが追加されていることを確認してください。

編集：さらに、他の人が指摘しているように、文字列を使用して文字列を互いに追加してから追加します。

Answer 3

DOMに要素全体を追加できるだけなので、問題があります。開いているdivタグを追加すると、ブラウザによって自動的に閉じられます。つまり、あなたのimg要素が兄弟として作成されます。

ロジックを変更してdivコンテナを作成してから、ループ内にHTML文字列を作成して追加することもできます。これを試してみてください：

var $div = $('<div class="newData"></div>').appendTo('#wrap'); 
var html = ''; 
for (var i = 0; i < 5; i++) { 
    html += '<img src="' + data.data[i].images.low_resolution.url + '"/>'); 
} 
$div.append(html); 

Answer 4

あなたは

out+='</div>'; 
$('#wrap').append(out); 

あなたの問題を引き起こしていることを、ループを閉じていないループエンドのためにあなたをして、あなたのループの最後