jQuery古いHTMLを上書きせずに複数のHTML要素を作成する

Question

配列のすべてのオブジェクトをHTML要素にするよりも、動的なjQuery関数を使用して配列の結果を数えたいと思います。 配列はSharePoint APIによって作成されます。 3つの結果/オブジェクトがある場合、コードを3回実行します。 2つの結果/オブジェクトがある場合、コードを2回実行します。

以下のコードでは、配列から最後の結果（オブジェクト）が作成され、前回作成された結果が上書きされます。

私はオブジェクトを数えるコードについて考えていましたが、append（）関数を使ってHTMLフィールドを追加しました。オブジェクトがある回数だけループします。しかし、これが最善の方法であるかどうかは分かりません。

jQuery.ajax({ 
    url: "http://URL/_api/web/webs", 
    type: "GET", 
    headers: { "accept": "application/json;odata=verbose" }, 
    success: function (data) { 
      console.log(data.d.results); 
      var aSites = data.d.results; 
      jQuery(aSites).each(function(i,oSite){ 
       var sTitle = oSite.Title; 
       var sURL = oSite.Url; 
       console.log(sTitle, sURL); 
       jQuery('.wrapper').html(jQuery('<div class="Title"><p>Title:</p><input type="text" name="fname" id="inputTitle"></div><div class="URL"><p>URL:</p><input type="text" name="fname" id="inputURL"></div>')); 
       jQuery("#inputTitle").val(sTitle); 
       jQuery("#inputURL").val(sURL); 
      }); 
    }, 
    error: function (error) { 
     alert(JSON.stringify(error)); 
    } 
}); 

Answer 1

あなたは.append()、ない.html()を使用する必要があるので、あなたは置き換えるのではなく追加します。また、毎回同じIDを使用することはできません。代わりにクラスを使用してください。

success: function (data) { 
    console.log(data.d.results); 
    var aSites = data.d.results; 
    $('.wrapper').empty(); 
    jQuery(aSites).each(function(i,oSite){ 
     var sTitle = oSite.Title; 
     var sURL = oSite.Url; 
     console.log(sTitle, sURL); 
     var newDIV = jQuery('<div class="Title"><p>Title:</p><input type="text" name="fname" class="inputTitle"></div><div class="URL"><p>URL:</p><input type="text" name="fname" class="inputURL"></div>')); 
     newDIV.find(".inputTitle").val(sTitle); 
     newDIV.find(".inputURL").val(sURL); 
     $('.wrapper').append(newDIV); 
    }); 
},