javascript - 映射 Json 数据并添加数据属性

Question

我在映射我的 Json 数据时遇到了困难。我想用 .name 类向每个 div 添加数据属性。所以结果是这样的：

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

可以这样获得密钥： ['streme'].key

这是我的错误 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

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

伪代码不确定您的 innerHTML 中的名称代表什么：

var div = []; for (var i, len = names.length; i < len; i++) { divs.push($(''+name+'').data("key", keys[i])); }

$container.append(divs);

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

Answer 3

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

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 4

尝试这样的事情

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