在动态创建的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);
})