Question

我在映射我的Json数据时遇到了困难。我想使用.name类将数据attr添加到每个div。结果是这样的：

<div class="name" data-key="sth"> sty</div>

Key可以这样：['streme']。键

这是我的小车JS：

function getExistingLinks() {
          $.post( "http://0.0.0.0:9292/api/links", function( data ) {
            var names = data.map(function (i) {
            return i['link'].name
            });
            var keys = data.map(function (i) {
            return i['link'].key
            });
            var container = document.querySelector(".link-names");
                names.forEach(function(name) {
                    var div = document.createElement('div');
                    div.innerHTML = name;
                    $('div').addClass("name");
                    // $('div').each( function(index) {
                           $('div')[index].data("key") = keys[index];
                       }
                    container.appendChild(div);
                });
       });  
      return false;   
    }

Answer 1

names.forEach(function(name,index) {
  var div = document.createElement('div');
  div.innerHTML = name;
  $(div).addClass("name");
  $(div).data("key") = keys[index];
});

您需要删除$（）选择器中的引号！

Answer 2

根据您的评论，可能会尝试这样做：

var i = 0;
names.forEach(function(name) {
    var div = document.createElement('div');
    div.innerHTML = name;
    $('div').addClass("name");
    $('div').data("key", keys[i]);
    container.appendChild(div);
    i++;
});

Answer 3

首选方法是只添加一次DOM，因为添加到DOM会导致重绘每个。

psuedo代码，因为不知道你的innerHTML中代表了什么名称：

var divs = []; for（var i，len = names.length; i＆lt; len; i ++）{ divs.push（$（''+ name +''）。data（“key”，keys [i]））; }

$ container.append（div的）;

http://codepen.io/jsdev/pen/2866265243563efd79cf05a5b12202b3

Answer 4

尝试这样的事情

 $('.name').data('key') //will give you sth

映射Json数据并添加数据attr

4 个答案: