如何用jQuery从JSON动态填充Div？已尝试循环但失效

首先得说下你原来代码里的几个问题，这才导致所有Div都被填充了重复内容：

• 嵌套循环居然用了同一个变量i，直接打乱了循环的逻辑顺序
• 选择器$('.article .image')会选中页面上所有带有.image类的元素，所以每次赋值都会把内容加到所有区块里
• 你的information是键值对形式的对象（包含first/second/third属性），不是数组，所以information.length其实是undefined，原来的for循环根本没法正确执行

接下来给你正确的实现方案，分两步走：

第一步：调整JSON数据的遍历方式 #

因为你的information是对象结构，我们可以先把它的取值转换成数组，这样就能按顺序和页面上的.article一一对应：

// 假设你的JSON数据已经是可访问的变量
const information = {
  first: { Image: 'image-1.jpg', Title: 'title-1', Text: 'text-1' },
  second: { Image: 'image-2.jpg', Title: 'title-2', Text: 'text-2' },
  third: { Image: 'image-3.jpg', Title: 'title-3', Text: 'text-3' }
};

// 把对象的取值转换成数组，顺序就是first→second→third
const infoItems = Object.values(information);

第二步：用jQuery遍历对应填充 #

我们先获取所有的.article元素，然后遍历infoItems数组，把每个数据项对应填充到对应的.article子元素里：

// 获取页面上所有的.article元素
const $articles = $('.article');

// 遍历信息数组，同时对应到每个article
infoItems.forEach((item, index) => {
  // 拿到当前索引对应的article元素
  const $currentArticle = $articles.eq(index);
  
  // 填充图片：这里建议插入img标签，而不是直接放路径
  $currentArticle.find('.image').html(`<img src="${item.Image}" alt="${item.Title}">`);
  // 填充标题
  $currentArticle.find('.title').text(item.Title);
  // 填充文本
  $currentArticle.find('.text').text(item.Text);
});

如果你更习惯用jQuery原生的.each()方法，也可以这么写：

$articles.each(function(index) {
  const item = infoItems[index];
  $(this).find('.image').html(`<img src="${item.Image}" alt="${item.Title}">`);
  $(this).find('.title').text(item.Title);
  $(this).find('.text').text(item.Text);
});

关键细节说明 #

• 用$articles.eq(index)或者$(this)定位单个.article元素，避免一次性选中所有元素
• 图片部分用<img>标签插入才能正确显示，直接append路径只会显示文本
• Object.values(information)会按对象属性的定义顺序生成数组，保证和页面上的.article顺序完全对应

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