jQuery создать несколько элементов HTML без перезаписи старого HTML

Я хотел бы сделать динамическую функцию jQuery, которая подсчитывает результаты из массива и чем делает для каждого объекта в массиве элемент HTML. Массив создан с помощью API SharePoint. Итак, если есть 3 результата/объекта, запустите код 3 раза. Если есть 2 результата/объекта, запустите код 2 раза.jQuery создать несколько элементов HTML без перезаписи старого HTML

Приведенный ниже код создает последний результат (объект) из массива и перезаписывает предыдущие сделанные.

Я думал о фрагменте кода, который подсчитывает объект, а затем использует функцию 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)); 
    } 
});

источник

2017-02-20 Tiboon

Используйте '.append()', а не '.html()', поэтому он добавляет в DIV вместо его замены. – Barmar

Кроме того, идентификаторы должны быть уникальными. Вы не можете использовать 'id =" inputTitle "и' id = "inputURL" на каждом из них. – Barmar

Append work thanks :) Я поставлю идентификатор объекта за идентификатором в div. Чем это должно работать – Tiboon

Вы должны использовать .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); 
    }); 
},

источник

2017-02-20 13:58:20 Barmar

jQuery создать несколько элементов HTML без перезаписи старого HTML

ответ

Смежные вопросы