Question

您好我正在尝试将一个JS对象列表（具有多个属性）插入到html列表中。在我的HTML中，我有一个简单的列表标记

<ul class="list">
    <li class='list-item'>
        <span class='date'></span>
        <span class='lan'></span>
        <span class='topic'></span>
        <span class='speaker'></span>
        <a class ='play' title='Listen' href=""><i class='fa fa-play-circle-o'></i></a>
        <a class ='download' title='Download' href=""><i class='fa fa-download'></i></a>
    </li>
</ul>

在JS文件中，我有一个名为values的变量包含那些带有一段代码的对象

for (var i = values.length - 1; i >= 0; i--) {
    $(".date").append(values[i].date);
    $('.lan').append(values[i].lan);
    $('.topic').append(values[i].topic);
    $('.speaker').append(values[i].speaker);
    $('.play').attr('href', values[i].play);
    $('.download').attr('href', values[i].link);
};

结果是只有一个列表项，值只保持concat。我想我应该创建多个“列表项”，但我尝试了一些并没有成功。任何人都可以给我一些提示或帮助。谢谢。

Answer 1

实现此目的的最佳方法是使用模板。您可以使用模板引擎（小胡子等）或自己动手：

<script type = "text/template" id="template">
  <li>
    <span class="a"></span>    
    <span class="b"></span>
  </li>
</script>

<script type="text/javascript">

    var values = [
      {a : 1, b : 2},
      {a : 2, b : 3}
    ]

    for (var i = values.length - 1; i >= 0; i--) {
      var value = values[i];
      var element = $($('#template').html());
      element.find('.a').html(value.a);
      element.find('.b').html(value.b);
      $('.list').append(element);
    };


</script>

<ul class="list">

</ul>

Answer 2

您可以创建li代码，将变量放入其中，然后将整个内容附加到.list。

for (var i = values.length - 1; i >= 0; i--) {
    var item = $("<li class='list-item'>\
        <span class='date'></span>\
        <span class='lan'></span>\
        <span class='topic'></span>\
        <span class='speaker'></span>\
        <a class ='play' title='Listen' href=''><i class='fa fa-play-circle-o'></i></a>\
        <a class ='download' title='Download' href=''><i class='fa fa-download'></i></a>\
        </li>");
    item.find(".date").append(values[i].date);
    item.find('.lan').append(values[i].lan);
    item.find('.topic').append(values[i].topic);
    item.find('.speaker').append(values[i].speaker);
    item.find('.play').attr('href', values[i].play);
    item.find('.download').attr('href', values[i].link);
    $(".list").append(item);
};

您还需要清除ul标记。它应该不包含任何内容，因为脚本会添加项目的li标记本身。

您可能还会将内部.append更改为.text或.html，具体取决于您的要求。

请参阅this plunker。

Answer 3

您附加的值不是您想要的值。

尝试仅传递span中的变量：

$(".date").text(values[i].date);

根据您的标记，这是一种简单的方法。

或者你可以使用@Amir回答创建一个全新的'li'元素然后追加它。

Answer 4

好吧，我不建议您使用代码中的方法。在你的情况下，我会有类似的东西（尝试）：

    var list = $('.list');
   list.empty();
 for (var i = values.length - 1; i >= 0; i--) {

  var t = $('<li class="list-item" />');
  t.append('<span class="date">' + values[i].date + '</span>');
  t.append('<span class="lan">' + values[i].lan + '</span>');
  t.append('<span class="topic">' + values[i].topic + '</span>');
  list.append(t);

 }
});

单独的html和js列表

4 个答案: