Question

JSONファイル内のいくつかの要素を繰り返し処理しようとしています。ここで私が持っているものです。

$.each(response.data.items, function(i,data) 
{ 
var id=data.id; 
var results="<div><iframe width='320' height = '190' src='http://www.example.com/"+id+"' frameborder='0' type='text/html'></iframe></div>"; 

$("#resultsOut").html(results); 
}); 

今、出力されている唯一のHTMLは、idがJSONで発生する最後のIDです

<div><iframe width='320' height = '190' src='http://www.example.com/"+id+"' frameborder='0' type='text/html'></iframe></div> 

です。どのように私はこれを変更するのですか？その代わりに、発生したすべてのIDに対してHTMLブロックを一度参照するようにします。

Answer 1

.html()はむしろそれに追加するよりも、新しいHTMLで選択された要素の内容を置き換えるので、あなたはおそらく

$(results).appendTo("#resultsOut"); 

代わりの

$("#resultsOut").html(results) 

する必要があります。

Answer 2

毎回$("#resultsOut")の内部HTMLを上書きしています。

$.each(response.data.items, function(i,data) 
{ 
    var id=data.id; 
    var results="<div><iframe width='320' height = '190' src='http://www.example.com/"+id+"'  frameborder='0' type='text/html'></iframe></div>"; 

    $("#resultsOut").append($(results)); 
}); 

Answer 3

すべての繰り返しで前のHTMLを上書きするため、最後のIDのみが表示されます。 .append（）を使用してみてください：

$.each(response.data.items, function(i,data) 
{ 
var id=data.id; 
var results="<div><iframe width='320' height = '190' src='http://www.example.com/"+id+"' frameborder='0' type='text/html'></iframe></div>"; 

$("#resultsOut").append(results); 
});