如何使用JQuery的.append/.after/.each方法生成指定Bootstrap布局？

问题描述 #

我想要实现以下HTML结构：

<div class="item"> 
  <div class="container-fluid"> 
    <div class="row"> 
      <div class="col-md-3">IMG</div> 
      <div class="col-md-9">TEXT</div> 
    </div> 
  </div> 
</div> 
<div class="item"> 
  <div class="container-fluid"> 
    <div class="row"> 
      <div class="col-md-3">IMG</div> 
      <div class="col-md-9">TEXT</div> 
    </div> 
  </div> 
</div>

目前我已编写了部分代码：var ws_f...，请问如何使用JQuery的.append、.after、.each方法完成该布局的格式化生成？

解决方案 #

没问题，我来一步步教你怎么用这几个jQuery方法生成你要的布局。这里分两种常见场景说明，你可以根据实际需求选择：

场景1：基于数据遍历生成（灵活扩展） #

如果你的ws_f是存储图片和文本的数据源，用.each遍历批量生成是最优解。先假设你的数据源格式如下（替换成你实际的ws_f变量即可）：

// 示例数据源，替换成你的实际数据
var ws_data = [
  { img: "图片1内容/URL", text: "文本内容1" },
  { img: "图片2内容/URL", text: "文本内容2" }
];

然后选择页面上的父容器（比如<div id="content-container"></div>），结合.append层层构建结构：

// 获取挂载容器
var $container = $('#content-container');

// 遍历数据生成每个.item
$.each(ws_data, function(index, item) {
  // 1. 创建最外层.item元素
  var $item = $('<div class="item"></div>');
  
  // 2. 构建container-fluid并追加到.item
  var $fluid = $('<div class="container-fluid"></div>').appendTo($item);
  
  // 3. 构建row并追加到container-fluid
  var $row = $('<div class="row"></div>').appendTo($fluid);
  
  // 4. 构建图片列，填充内容后追加到row
  $('<div class="col-md-3"></div>').text(item.img).appendTo($row);
  
  // 5. 构建文本列，填充内容后追加到row
  $('<div class="col-md-9"></div>').text(item.text).appendTo($row);
  
  // 把完整的.item追加到父容器
  $container.append($item);
});

场景2：固定生成两个相同结构 #

如果不需要动态数据，就是要生成固定的两个.item，可以用.append先添加第一个，再用.after在它后面追加第二个：

var $container = $('#content-container');

// 创建第一个完整的.item并追加到容器
var $firstItem = $(`
<div class="item"> 
  <div class="container-fluid"> 
    <div class="row"> 
      <div class="col-md-3">IMG</div> 
      <div class="col-md-9">TEXT</div> 
    </div> 
  </div> 
</div>
`).appendTo($container);

// 用.after在第一个.item后面追加第二个（克隆第一个更高效）
$firstItem.after($firstItem.clone());

关键方法小总结 #

• .append()：把元素添加到目标元素的内部末尾，是构建嵌套DOM的核心
• .after()：把元素添加到目标元素的外部后方，适合生成同级相邻元素
• .each()：遍历数组或jQuery集合，批量生成重复结构，让代码更易维护

内容的提问来源于stack exchange，提问作者user1255154