Question

我使用AJAX获取数据并需要动态创建列表。在开始时我有：

<ul id="list">
</ul>

最后我希望：

<ul id="list">
    <li data-city-numb="001">city-1<span>country-1</span></li>
    <li data-city-numb="002">city-2<span>country-2</span></li>
</ul>

现在我已停止使用此代码（我知道它错了）：

for (var i = 0; i < numbOfCityList; i++) {
    $('<li/>', {
        text: myCityList.list[i].city + "<span>" + myCityList.list[i].county + "</span>"
    }).appendTo("#selected-list");
    $("#list").last().data(myCityList.list[i].numbid);
};

Answer 1

您没有包含太多信息，因此我添加了我自己的城市列表版本。

你可以这样做（虽然有很多其他可能的方法）：

var myCityList = [{
  city: 1,
  county: 1
}, {
  city: 13,
  county: 7
}];

for (var i = 0; i < myCityList.length; i++) {
  $li = $('<li/>');
  $li.attr('data-city-numb', myCityList[i].city);
  $li.html(myCityList[i].city + ", <span>" + myCityList[i].county + "</span>");
  $('#list').append($li);

  // For one-line fans:
  // $('<li>').attr('data-city-numb', myCityList[i].city).html(myCityList[i].city + ", <span>" + myCityList[i].county + "</span>").appendTo('#list');
};

  // Or even, remove even the for(...) loop: 
  // $.map(myCityList,function(i, el) { $('<li>').attr('data-city-numb', el.city).html(el.city + ", <span>" + el.county + "</span>").appendTo('#list');});

  // I prefer the first version for readability

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

Answer 2

首先，当#selected-list拥有<ul>时，您会向id="list"附加内容。这就是为什么您的代码首先不起作用的原因，因为<ul id="selected-list">并不存在！

假设您的数据正确通过（通过AJAX返回），并且您使用的阵列实际上已填充数据，您应该执行以下操作：

$('#list').append('<li data-city-numb="' + myCityList[i].city + '">' + myCityList[i].city + ', <span>' + myCityList[i].county + '</span></li>');

参见工作示例：

＆＃13;

var myCityList = [{
  city: 'Amsterdam',
  county: 'Netherlands'
}, {
  city: 'Rotterdam',
  county: 'Netherlands'
}];

for (var i = 0; i < myCityList.length; i++) {
  $('#list').append('<li data-city-numb="' + myCityList[i].city + '">' + myCityList[i].city + ', <span>' + myCityList[i].county + '</span></li>');
};

＆＃13;

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

＆＃13;

动态创建包含数据属性和HTML的元素，并插入到现有元素中

2 个答案: