在动态创建的html上设置数据信息

时间:2017-12-18 13:34:50

标签: javascript jquery json

我有来自服务器的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.

但是当我在控制台中尝试它时,我得到了预期的对象信息,但总是来自数组中的最后一个元素。为什么会这样?我相信它可能是愚蠢的,但我无法弄清楚。

因此,任何有关如何解决此问题的想法,或其他方法,使这项工作表示赞赏。我通过设置一些&#34; display:none&#34;占位符html标签并填充那些我稍后需要的信息,但看起来像一个糟糕的解决方案......

2 个答案:

答案 0 :(得分:0)

您不应该在循环中设置htmls变量。我认为你每回合粉碎它的内容,这就是为什么你只有最后一项。你应该这样做:

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

答案 1 :(得分:0)

如何在html创建代码中的每个元素上设置索引号,然后遍历$('。rl_grupo')元素,如下所示?

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