在動態創建的html上設置數據信息

Question

我有一個來自服務器的JSON響應，它返回一個包含32個對象的數組（在這種情況下）。 像這樣：

[{object1},{ object2},{ object3}, etc]. 

每個對象都有一些我用來填充html模板的信息。 為此，我只使用一個簡單的循環：

     for(var i = 0; i < api_empresaListar.length; i++)
          {
            var item = api_empresaListar[i];
            var htmls;
            htmls = $('...lots of html code');
...

然后，只需查找/更改值，然后將項目附加到DOM上，就很簡單了。 一切正常。 但是，對於代碼的下一部分，我想從用於構建html元素的對象中訪問所有信息（我只顯示了部分信息）。 因此，經過大量搜索后，我嘗試使用數據，如下所示：

var tp = htmls.find(".rl_grupo"); // the main div of each html element created in the loop
$(tp).data('key', api_empresaListar[i]); // here, I expected to just insert the object data in each created item.

但是，當我在控制台中嘗試時，我按預期方式獲得了對象信息，但是總是從數組中的最后一個元素得到的。 為什么會這樣呢？ 我認為這可能有些愚蠢，但我無法弄清楚。

因此，對如何解決此問題的任何想法，或完成此工作的另一種方法表示贊賞。 我通過設置一些“ display：none”占位符html標記使其工作，稍后用我需要的信息填充這些標記，但看起來是一個糟糕的解決方案...

Answer 1

您不應在循環中設置htmls變量。 我認為您動不動就粉碎它的內容，這就是為什么只有最后一項的原因。 您應該執行以下操作：

var htmls = $('<div></div>');
for(var i = 0; i < api_empresaListar.length; i++) {
    htmls.append($('...lots of html code'));
}

Answer 2

怎么樣在html創建代碼的每個元素上設置索引號，然后像這樣迭代$（'。rl_grupo'）元素？

$('.rl_grupo').each(function(){
  var index = $(this).data('index');
  var currentData = api_empresaListar[index];
  $(this).data('key', currentData);
})