如何通过循环实现将JSON数据分别展示在独立的Bootstrap卡片中

我明白你的问题了——你现在的代码只会把最后一条帖子数据显示在卡片里，因为每次循环都在覆盖同一个卡片元素的内容。要实现每条数据对应独立的Bootstrap卡片，我们需要在循环里创建新的卡片元素，而不是重复修改同一个元素。

问题根源 #

你的当前代码中，$(".card-header")这类全局选择器会匹配页面中所有对应的元素，每次循环都会把这些元素的内容替换成当前item的数据，最终只有最后一次循环的内容被保留下来。

修改后的实现方案 #

我们可以把原始卡片作为复用模板，每次循环克隆这个模板，填充对应的数据后添加到页面容器中：

1. 调整HTML结构（添加卡片模板）

把原有的卡片改成隐藏的模板，方便我们克隆复用：

<div class="container" id="posts-container"> 
  <!-- 卡片模板，初始隐藏，用于克隆 -->
  <div class="card bg-warning d-none" id="card-template"> 
    <div class="card-header"></div> 
    <div class="card-body"> 
      <h5 class="card-title"></h5> 
      <p class="card-text"></p> 
    </div> 
  </div> 
</div>

2. 修改JavaScript逻辑（循环克隆+填充数据）

在AJAX成功回调里，遍历每条数据，克隆模板并填充内容：

$(function () { 
  $.ajax({ 
    url: "https://jsonplaceholder.typicode.com/posts", 
    success: function (result) { 
      // 提前获取容器和模板元素，避免重复DOM查询
      const $postsContainer = $("#posts-container");
      const $cardTemplate = $("#card-template");

      $.each(result, function (index, item) { 
        // 克隆模板卡片，移除隐藏类和模板ID
        const $newCard = $cardTemplate.clone().removeClass("d-none").removeAttr("id");
        
        // 填充当前item的数据到克隆的卡片内
        $newCard.find(".card-header").html(`user id: ${item.userId} - id: ${item.id}`);
        $newCard.find(".card-title").text(item.title);
        $newCard.find(".card-text").text(item.body);
        
        // 将填充好的卡片添加到页面容器中
        $postsContainer.append($newCard);
      }); 
    } 
  }); 
});

关键细节说明 #

• 克隆模板：使用clone()方法复制模板卡片，确保每条数据都有独立的DOM元素，不会互相覆盖
• 局部元素查找：用$newCard.find()替代全局选择器，只修改当前克隆卡片内的内容，避免干扰其他卡片
• 清理模板属性：移除模板的id和d-none类，防止页面出现重复ID和隐藏新卡片

这样修改后，接口返回的每一条帖子数据都会生成一个独立的Bootstrap卡片，依次展示在页面容器中。

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