Question

我正在编写一段代码，我将json文档中的数据通过jquery添加到我的html中。我是jquery的新手并且坚持到这里。

这是html

 <ul id="list">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

这是脚本

var json = [
  {
    "_id": "5771ff92e0a1dea908b82d9a",
    "index": 0
  },
  {
    "_id": "5771ff92d906e7541ed51198",
    "index": 1
  },
  {
    "_id": "5771ff925a7ed5d7558e3fbc",
    "index": 2
  },
  {
    "_id": "5771ff9201669663584e0f25",
    "index": 3
  }
]

function myfunction(json)
{
        $.each(json,function(
            $(this).innerhtml= json.index;
    ));
}
$(document),ready(function(){
    $("#list li").myfunction(json);
});

这是我尝试过的。这种方法是否正确？或者是否有任何不同的方法可以轻松地做到这一点。

Answer 1

这是使用jQuery.map（）

的解决方案

HTML代码

<ul id="list"></ul>

然后是你的Javascript文件：

var json = [
  {
    "_id": "5771ff92e0a1dea908b82d9a",
    "index": 0
  },
  {
    "_id": "5771ff92d906e7541ed51198",
    "index": 1
  },
  {
    "_id": "5771ff925a7ed5d7558e3fbc",
    "index": 2
  },
  {
    "_id": "5771ff9201669663584e0f25",
    "index": 4
  }
]

$(function(){
var data = [];

$(json).map(function(i, item) {
   data.push('<li>'+item.index+'</li>');
   });
   $('#list').append(data);
})

和JSfiddle链接https://jsfiddle.net/to53xxbd/

这样，只有在将完整数组附加到DOM后才能操作DOM。

最诚挚的问候，

布鲁诺

Answer 2

可能你想要这样的东西 HTML

<ul>
</ul>

的Javascript

var json = [
  {
    "_id": "5771ff92e0a1dea908b82d9a",
    "index": 0
  },
  {
    "_id": "5771ff92d906e7541ed51198",
    "index": 1
  },
  {
    "_id": "5771ff925a7ed5d7558e3fbc",
    "index": 2
  },
  {
    "_id": "5771ff9201669663584e0f25",
    "index": 3
  }
]

$(function(){
   for(i=0;i<json.length;i++){
      $("ul").append("<li>"+json[i].index+"</li>")
    }
})

如果有帮助请告诉我

Answer 3

http://plnkr.co/edit/qwo32DO0u45Uhbduq5Ry?p=preview

HTML

<ul id="list">

</ul>

的javascript

var json = [
  {
    "_id": "5771ff92e0a1dea908b82d9a",
    "index": 0
  },
  {
    "_id": "5771ff92d906e7541ed51198",
    "index": 1
  },
  {
    "_id": "5771ff925a7ed5d7558e3fbc",
    "index": 2
  },
  {
    "_id": "5771ff9201669663584e0f25",
    "index": 3
  }
]



$(function(){
var data = [];

$.each(json, function(i, item) {
  alert(i);
   data.push('<li>'+item.index+'</li>');

   });
   $('#list').append(data.join(''));
})

通过jquery用json数据填充html元素

3 个答案: