JavaScript 如何将数组对象按奇偶索引交替渲染到竖线左右两侧

• 现有代码存在两个逻辑错误：
  • forEach 遍历数组时没有接收当前元素的索引参数，无法判断条目应该落在竖线的哪一侧
  • 拼接HTML时硬编码了左、右两套完整容器，导致每条数据都会同时在左右两侧渲染重复内容

仅需两处调整即可达成交替排列效果：

• 给forEach的回调补充第二个入参，获取当前遍历项的索引值
• 通过索引对2取余的结果动态判断位置：偶数索引（0、2、4...）的条目容器加left类，奇数索引（1、3、5...）的条目容器加right类，每个数据只生成一个对应位置的容器结构

fetch(url)
  .then(result => result.json())
  .then(data => {
    console.log(data);
    data.forEach((point, index) => {
      // 按索引奇偶分配展示侧：偶数居左，奇数居右
      const sideClass = index % 2 === 0 ? 'left' : 'right'
      const appendToHtml = `
        <div class="container ${sideClass}">
          <div class="content">
            <h2>${point.Title}</h2>
            <p>${point.Description}</p>
            <p>${point.Year}</p>
          </div>
        </div>
      `
      $(".timeline").append(appendToHtml)
    })
  })

这个逻辑完全匹配需求：数组第1个条目（凯迪拉克，索引0）落在左侧，第2个条目（沃尔沃，索引1）落在右侧，后续条目顺着索引奇偶交替排布，不会再出现左右重复渲染的问题。

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