Question

我想知道我是否正确地执行此操作，但我希望每个现有列表都能从json添加数据。

json文件如下所示：

{
   val1:key1,
   val2:key2,
   val3:key3
}

允许调用文件test.json。

我有一个现有的列表，我创建了一个代码版本，从数据中创建了一个从头开始的列表，但是在添加了几个项目后，dom变得太嵌套了。

HTML是：

<html>
<head>
    <script scr="jquery.js></script>
</head>
<body>
    <main id="wrapper">
       <ul id="menu">
           <li class="test"><a>Item1</a></li>
           <li class="test"><a>Item2</a></li>
           <li class="test"><a>Item3</a></li>
       </ul>
    </main>
</body>
</html>

所以我的第一个脚本是：

$.getJSON("test.json", function (data) {
    var items = [];
    $.each(data,function (key,val) {
        items.push("<li id='"+key+"'>"+"<a href='#'>"+key+"</a>"+"<p>"+val+"</p>"+"</li>");
    });

    $( "<ul/>", {
        "class": "menu",
        html: items.join( "" )
    }).appendTo( "main#wrapper" );
})

当然我只有包装类，它为我创造了其余部分。但我认为这是一种不切实际的方法，并希望将

添加到现有的lis中。所以我几乎做到了......但我不知道似乎做得对......

$.getJSON("test.json",function (data) {
    $.each(data,function (key,val) {
       $('<li.test>').html(
           "<p>" + val + "</p>"
       ).appendTo('ul#menu li')
    });
});

它的工作原理是它将p标签添加到我的li中，但每个li都获取所有数据。

Answer 1

问题似乎是您为列表项（li）选择的选择器。

$('<li.test>').html(...)

这会同时更改所有列表项的html。

您提供的第一个代码示例似乎可以正常工作，因为您可能不知道json文件中对象的确切数量。

但是，如果你这样做，那么这样的事情就行了......

$("li.test").each(function(index){
  $(this).html("<p>" + data[index] + "</p>")
})

jQuery JSON进入HTML现有列表

1 个答案: