如何让每个HTML Article仅对应一个JavaScript数组中的对象？

你的问题核心是每次循环时，选择了所有已存在的<article>元素进行内容追加，导致每个Article都累积了所有数组对象的内容。以下是两种修正方案：

错误代码示例（模拟你的问题场景） #

$.ajax({
  url: '目标接口地址',
  success: function(response) {
    const list_of_places = response.data;
    $.each(list_of_places, function(index, place) {
      // 先添加空article到容器
      $('.places').append('<article></article>');
      // 选择所有article追加内容，导致所有已有article都被修改
      $('.places article').append(`<h3>${place.name}</h3><p>${place.address}</p>`);
    });
  }
});

正确方案1：创建独立Article元素后追加 #

每次循环单独创建一个<article>元素，填充当前数组对象的内容后，再添加到容器中，确保每个Article只对应一个对象：

$.ajax({
  url: '目标接口地址',
  success: function(response) {
    const list_of_places = response.data;
    $.each(list_of_places, function(index, place) {
      // 创建单个article并填充当前place的内容
      const $singleArticle = $('<article></article>').append(`
        <h3>${place.name}</h3>
        <p>${place.address}</p>
        <p>${place.description}</p>
      `);
      // 将独立的article添加到容器
      $('.places').append($singleArticle);
    });
  }
});

正确方案2：拼接HTML字符串一次性插入 #

如果数组长度较大，这种方式能减少DOM操作次数，提升性能：

$.ajax({
  url: '目标接口地址',
  success: function(response) {
    const list_of_places = response.data;
    let articleHtml = '';
    $.each(list_of_places, function(index, place) {
      // 为每个对象拼接对应的article HTML片段
      articleHtml += `
        <article>
          <h3>${place.name}</h3>
          <p>${place.address}</p>
          <p>${place.description}</p>
        </article>
      `;
    });
    // 一次性将所有article插入容器
    $('.places').html(articleHtml);
  }
});

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