有沒有辦法對 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