javascript - 使用 JSON 根据 ID 附加到列表

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));
    });

});

}

我遇到的这个问题是，虽然它确实将“li”元素添加到每个“ul”中，但它似乎将第二个数组中的 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 是什么。

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

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

至

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

希望能解决您的问题。

编辑

或者更好的是，将列表元素保存到变量中并使用它:

  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));
  });