Question

我正在将li数据中的ul添加到json中，用于每个循环

我尝试了以下代码

$("#accordion li").remove();
$.each(jsonData, function( index, value ) {
console.log(value.SubCategoryName)
$("#accordion").append('<li><a id="'+value.subCategoryID+'" style="cursor: pointer;">"'+value.SubCategoryName+'</a></li>');

})

这让我清除了ul中的旧值，控制台也显示了值。但是我无法附加到ul上。请建议

Answer 1

$("#accordion ul li:last").after('<li><a>Test</span></a></li>');

插入后尝试。

Answer 2

创建一个空字符串-用它创建li的字符串，然后将其直接传递到手风琴的html中。

这将同时创建li的列表，其次将用新字符串完全替换ul的html。这种方法的一个优点-您只影响DOM一次-一次内容替换-与使用.append（）进行每次循环迭代相比，可以进行车削。

我刚刚避开了一个jsonData对象，然后对其进行遍历以创建ul li。

Aslo请注意，a应当具有href属性，并且悬停时的样式已移至CSS块。

var jsonData = [{
'subCategoryID': '1',
'SubCategoryName': 'Category one',
}, {
'subCategoryID': '2',
'SubCategoryName': 'Category two',
}, {
'subCategoryID': '3',
'SubCategoryName': 'Category three',
},];

var liStr = '';
$.each(jsonData, function( index, value ) {
  liStr +='<li><a id="'+ value.subCategoryID + '">'+ value.SubCategoryName + '</a></li>';
})

$("#accordion").html(liStr);

#accordion li:hover {
  cursor: pointer;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion"></ul>

从json数据中将li添加到ul

2 个答案: