Question

你好，我正在尝试使用json和jquery，而且我在生成列表方面一直处于困境。

我正在尝试从以下json文件构建列表

{

 "svg": [

{
  "Title":"cool",
  "Description":"This is what cool should be in accordance to spec"
},
{
  "Title":"cool-act",
  "Description":"This is more in keeping with how it behaves in flash"
},
{
  "Title":"speed",
  "Description":"this is a rapid test transition time is 100ms (+-), display is 100mm"
},
{
  "Title":"desirable",
  "Description":"This is a subtle experience"
},
{
  "Title":"Maker",
  "Description":"An alternative experience speakers"
},
{
  "Title":"Hole-out",
  "Description":"colour zooms out"
}


  ],

"css" : [

{
  "Title":"test",
  "Description":"test"
}
]


}

我正在进行ajax调用以使用该文件，我希望创建一个最终看起来像这样的列表：

<nav>
  <ul id="svg">
     <li>cool<li/>
     <li>cool-act<li/>
     <li>speed<li/>
     <li>desirable<li/>
     <li>Maker<li/>
     <li>Hole-out<li/>
  </ul>
  <ul id="css">
     <li>test<li/>
  </ul>
</nav>

这是我用来创建菜单代码的函数

function cannyMenu (data){


//Define categories,animation and title from JSON
$.each(data, function (category, animation) {

    // create menus based on arrays in object - svg, css etc.
    $('nav').append($('<ul>').attr('id', category));

    // create the list from each arrays object - e.g all titles within svg.
    $.each(animation, function (index, value) {

           $('ul').append($('<li>').text(value.Title));
    });

});

}

我遇到的这个问题是，虽然它确实添加了＆＃39; li＆＃39;每个元素的元素。它似乎将我的第二个数组中的li属性放入第一个使得html输出显示如下：

<nav>
  <ul id="svg">
     <li>cool<li/>
     <li>cool-act<li/>
     <li>speed<li/>
     <li>desirable<li/>
     <li>Maker<li/>
     <li>Hole-out<li/>
     <li>test<li/>/* gets duplicated */
  </ul>
  <ul id="css">
     <li>test<li/>
  </ul>
</nav>

我需要确保只将与自己的数组相关的属性输出到自己的列表中，但我不知道如何执行此操作。

欢迎任何建议或帮助

由于

Answer 1

问题在于，当您将<li>元素添加到页面中的所有<ul>元素时，无论其ID是什么。

您想要将值添加到具有特定ID的<ul>。所以改变：

$('ul').append($('<li>').text(value.Title));

到

$('#' + category).append($('<li>').text(value.Title));

希望能解决你的问题。

修改

甚至更好，将list元素保存到变量并使用：

var listElement = $('<ul>').attr('id', category); // create menus based on arrays in object - svg, css etc. $('nav').append(listElement); // create the list from each arrays object - e.g all titles within svg. $.each(animation, function (index, value) { listElement.append($('<li>').text(value.Title)); });

Answer 2

问题是这个$('ul')适用于所有UL。当程序循环通过类别时，它将动画附加到导航中的所有UL。您可以将新创建的UL分配给变量，并避免使用第二个选择器：

var UL = $('nav').append($('<ul>').attr('id', category));

并使用它来附加LI

UL.append($('<li>').text(value.Title));

使用JSON根据ID附加到列表

2 个答案: