Question

我想创建一个动态jQuery函数来计算数组的结果，而不是为数组中的每个对象创建一个HTML元素。该阵列由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);
   });
},

jQuery创建多个HTML元素而不覆盖旧的HTML

1 个答案: