Question

我有一个元素列表，我想用Bootstrap元素创建列表结构（例子）：

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

我认为我会做类似的事情：

foreach(element)
{
   $("#ul").append($("<a href='" + element +"'>").text(element));
}


<div class="container">
  <div id="ul" class="list-group">
</div>

这很好但我不知道如何处理其他嵌套元素（<h4>和<p>）并设置它们的text属性。还有一种更简洁的方法来执行href元素的<a>部分吗？任何提示和技巧都表示赞赏。

Answer 1

你需要单独构建这些元素，并在你已经对它们进行操作后附加它们：

foreach(element)
{
  var anchor = $("<a href='" + element +"'>");
  var header = $('<h4>').text('stuff');
  var p = $('<p>').text('More stuff');
  anchor.append(header).append(p);
  $("#ul").append(anchor);
}

Answer 2

就主要问题而言，Brennan的回答肯定会有所帮助。至于在<a>中执行href的另一种方法，请查看this post。

如何追加元素并多次设置文本

2 个答案: