有没有办法对 Javascript 中的数组中的每个奇数和偶数 object 进行排序？

Question

我需要能够在垂直线的左侧每偶数 object 和右侧的每奇数 object 上 append。 我不确定如何实现这一目标。 JSON 的样本，（目前这只是虚拟数据）（网址）

[{
        "Year": 2010,
        "Title": "Cadillac",
        "Description": "Escalade ESV"
    },
    {
        "Year": 1998,
        "Title": "Volvo",
        "Description": "V70"
    },
    {
        "Year": 1992,
        "Title": "Toyota",
        "Description": "Camry"
    },
    {
        "Year": 2012,
        "Title": "Ford",
        "Description": "Explorer"
    }]

这是我的代码：

fetch(url)
.then(result => {
  return result.json();
})
.then (data =>{
  console.log(data);
  data.forEach( (point) => {
      const appendToHtml =  `
      <div class="container left">
            <div class="content">
                <h2>${point.Title}</h2>
                <p>${point.Description}</p>
                <p>${point.Year}</p>
            </div>
        </div>
        <div class="container right">
            <div class="content">
                <h2>${point.Title}</h2>
                <p>${point.Description}</p>
                <p>${point.Year}</p>
            </div>
        </div>
            `;
      $(".timeline").append(appendToHtml);
    });
  })

问题是左侧和右侧的 append。 单击此处查看问题的图像。 我需要交替，例如左边的凯迪拉克，右边的 Volva 等等......我似乎不知道该怎么做......

提前致谢！

Answer 1

您可以计算汽车指数的奇数或偶数，并在此基础上应用 class left和right 。

data.forEach( (point, index) => {
  const isOdd = index % 2;
  const appendToHtml =  `
  <div class="container ${isOdd ? 'right' : 'left' }">
        <div class="content">
            <h2>${point.Title}</h2>
            <p>${point.Description}</p>
            <p>${point.Year}</p>
        </div>
    </div>`;
  $(".timeline").append(appendToHtml);
});

Answer 2

给你go一个解决办法

 fetch(url).then(result => { return result.json(); }).then (data =>{ console.log(data); data.forEach( (point, i) => { const appendToHtml = ` <div class=`container ${i%2 === 0? "right": "left" }`> <div class="content"> <h2>${point.Title}</h2> <p>${point.Description}</p> <p>${point.Year}</p> </div> </div> `; $(".timeline").append(appendToHtml); }); })

使用模板文字查找奇偶使用 mod function