Question

我正在尝试将所有对象名称放在HTML中，而我正在使用此函数。

  function getExistingLinks() {
      $.post( "http://0.0.0.0:9292/api/links", function( data ) {
        var names = data.map(function (i) {
        return i['link'].name
        });
        document.querySelector(".link-names").innerHTML = names;
      });
    }

html非常简单：

 <form id="addbookmark">
    <p><label for="title">Title</label><br />
    <input type="text" id="title" name="title" size="50" value="" /></p>
    <p><label for="url">Url</label><br />
    <input type="text" id="url" name="url" size="50" value="" /></p>
        <p class="link-names"></p>
    <p><input id="save" type="submit" value="Save Link" /></p>
  </form>

但在这种情况下，所有的名字都在一个div .link-names中，我宁愿把每个名字放在单独的div .link-name中我怎么能这样做？

Answer 1

如何迭代名称，并附加每个名称？

var container = document.querySelector(".link-names");
names.forEach(function(name) {
    var div = document.createElement('div');
    div.innerHTML = name;
    container.appendChild(div);
    div.setAttribute('class', 'link-name');
});

Answer 2

使用$.each

 $.post( "http://0.0.0.0:9292/api/links", function( data ) {
   $.each(data,function (i,v) {
        var newDiv=$('<div />',{"class":"linkname",text:v.name});
        $('.link-names').append(newDiv);
        //or
         $('<div />',{"class":"linkname",text:v.name}).appendTo(".link-names");

    });

  });

在单独的div中映射JSON对象

2 个答案: