Javascript 根据ID使用JSON附加到列表

大家好，我一直在试验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>

<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>

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

酷

酷的表演

速度

理想的

制造商

钻孔



测试

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

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

});

}

功能cannyMenu（数据）{
//从JSON定义类别、动画和标题
$。每个（数据、功能（类别、动画）{
//基于对象中的数组创建菜单-svg、css等。
$（'nav'）.append（$（'ul>'）.attr（'id'，category））；
//从每个数组对象创建列表-例如svg中的所有标题。
$.each（动画、函数（索引、值）{
$（'ul'）.append（$（'
'）.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/>
  </ul>
  <ul id="css">
     <li>test<li/>
  </ul>
</nav>

<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>

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

酷

酷的表演

速度

理想的

制造商

钻孔

测试
/*重复*/


测试

我需要确保只将与它们自己的数组相关的属性输出到它们自己的列表中，但我不知道如何做

欢迎任何建议或帮助

---

谢谢

问题在于，当您将

元素添加到页面中的所有

元素时，不管它们的id如何

您希望将该值添加到具有特定id的

。因此更改：

$（'ul'）。追加（$（'
'）。文本（value.Title））

到

$（'#'+类别）.append（$（'
'）.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));
  });

var liselement=$（'
）.attr（'id'，category）；
//基于对象中的数组创建菜单-svg、css等。
$（'nav'）.append（listElement）；
//从每个数组对象创建列表-例如svg中的所有标题。
$.each（动画、函数（索引、值）{
追加（$（“
”）.text（value.Title））；
});
问题在于，当您将
元素添加到页面中的所有
元素时，不管它们的id如何

您希望将该值添加到具有特定id的
。因此更改：

$（'ul'）。追加（$（'
'）。文本（value.Title））

到

$（'#'+类别）.append（$（'
'）.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));
  });

var liselement=$（'
）.attr（'id'，category）；
//基于对象中的数组创建菜单-svg、css等。
$（'nav'）.append（listElement）；
//从每个数组对象创建列表-例如svg中的所有标题。
$.each（动画、函数（索引、值）{
追加（$（“
”）.text（value.Title））；
});
问题在于，此
$（'ul'）
将适用于所有ULs。当程序在类别中循环时，它会将动画附加到导航中的所有ULs。您可以将新创建的UL分配给变量，并避免使用第二个选择器，如下所示：

<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>

<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>

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

var UL=$（'nav'）.append（$（'
）.attr（'id'，category））；

并使用它附加LIs

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

UL.append（$（'
）.text（value.Title））；
问题在于，此
$（'ul'）
将适用于所有ULs。当程序在类别中循环时，它会将动画附加到导航中的所有ULs。您可以将新创建的UL分配给变量，并避免使用第二个选择器，如下所示：

<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>

<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>

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

var UL=$（'nav'）.append（$（'
）.attr（'id'，category））；

并使用它附加LIs

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

UL.append（$（'
）.text（value.Title））；
您需要使用json.parse（数据）将json字符串转换为json对象；我试着按照您的需要转换它和它的结果；最后一个问题是，如果我要创建包含锚定标记的列表，例如
.text（value.Title）
在jquery
var Title=value.Title；追加（$（“
”）.prepend（“”））只是一个想法。你的想法是什么？是的，它在@W9914420运行良好。您还可以进一步利用jQuerysAPI，例如：
var-anchor=$（''）.attr（'href'，'#'）.text（value.Title）；追加（$（“
”）.prepend（anchor））。但是我想这两种方法都是有效的：）嗨，米尼尔，你说得对，我有很多东西要学，谢谢你的时间米尼尔最后一个问题，如果我要创建包含锚定标记的列表，例如
.text（value.Title）
在jquery
var Title=value.Title；追加（$（“
”）.prepend（“”））只是一个想法。你的想法是什么？是的，它在@W9914420运行良好。您还可以进一步利用jQuerysAPI，例如：
var-anchor=$（''）.attr（'href'，'#'）.text（value.Title）；追加（$（“
”）.prepend（anchor））。但我想这两种方法都管用：）嗨，迈克尔，你说得对，我有很多东西要学，谢谢你抽出时间