如何用jQuery遍历JSON对象数组并实现两列布局展示到DOM？

没问题，我来帮你搞定这个需求！咱们一步步来，用jQuery轻松把两个人的JSON信息展示成两列布局。

1. 基础HTML结构 #

首先咱们先搭好页面的基本架子，需要一个容器来放两列内容：

<div class="user-container">
  <!-- 这里会通过jQuery动态生成两列用户信息 -->
</div>

2. 定义JSON数据数组 #

按照需求，咱们创建包含两个人信息的JSON数组，多加点键值对让内容更丰富：

const users = [
  {
    name: "Alice Smith",
    age: 32,
    job: "前端开发工程师",
    email: "alice.smith@example.com",
    location: "纽约",
    hobby: "摄影、徒步"
  },
  {
    name: "Bob Johnson",
    age: 28,
    job: "后端开发工程师",
    email: "bob.johnson@example.com",
    location: "旧金山",
    hobby: "编程、吉他"
  }
];

3. 用jQuery遍历并渲染DOM #

接下来就是核心部分：遍历JSON数组，动态创建每一列的用户信息，然后添加到容器里。咱们可以用$.each()来遍历数组，逐个生成用户卡片：

$(document).ready(function() {
  // 获取容器元素
  const $container = $('.user-container');
  
  // 遍历用户数组
  $.each(users, function(index, user) {
    // 创建用户卡片div
    const $userCard = $('<div class="user-card"></div>');
    
    // 把用户信息拼接成HTML字符串，也可以用append逐个添加元素
    const userInfo = `
      <h3>${user.name}</h3>
      <p><strong>年龄:</strong> ${user.age}</p>
      <p><strong>职业:</strong> ${user.job}</p>
      <p><strong>邮箱:</strong> ${user.email}</p>
      <p><strong>所在地:</strong> ${user.location}</p>
      <p><strong>爱好:</strong> ${user.hobby}</p>
    `;
    
    // 把信息添加到卡片里
    $userCard.html(userInfo);
    
    // 把卡片添加到容器中
    $container.append($userCard);
  });
});

4. 添加CSS实现两列布局 #

最后咱们加一点CSS样式，让两个卡片并排显示，看起来更美观：

.user-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.user-card {
  flex: 1;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.user-card h3 {
  margin-top: 0;
  color: #2c3e50;
}

小说明 #

• 用$(document).ready()确保DOM加载完成后再执行jQuery代码，避免找不到元素的问题
• $.each()是jQuery的遍历方法，能方便地循环处理数组里的每个用户对象
• Flex布局是实现两列并排最简洁的方式，flex:1让两个卡片平分容器宽度
• 把用户信息拼接成HTML字符串，比逐个创建<p>元素更高效简洁

你可以根据自己的需求修改JSON里的键值对或者CSS样式，调整成你想要的样子～

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