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