如何为JS生成的排行榜交替行添加不同背景样式？

方法一：生成HTML时直接添加交替类 #

这是最直接高效的方式，在遍历数组生成每行HTML时，通过索引判断奇偶，直接拼接对应的类名：

function renderHTML() {
  let playersHTML = '';
 
  // forEach第二个参数是当前元素的索引
  positionOfPlayers.forEach((player, index) => {  
      // 根据索引奇偶性定义行的类名，这里假设table__line--alternate是你需要的交替样式类
      const rowClass = index % 2 === 0 
        ? 'table__line grid' 
        : 'table__line grid table__line--alternate';
      
      playersHTML+= `
        <div class="${rowClass}">
          <p class="img"><img src="${player.image}"></p>
          <p class="text">${player.name}</p>
          <p class="text col"><span>${player.votes.count}</span><button id="${player.id}" class="vote-btn">vote now</button><span class="small">${player.votes.recommendation}</span></p>
          <p class="text">${player.earnings}</p>
        </div>`;
      })
      document.querySelector('.js-container').innerHTML = playersHTML;
}

方法二：修正CSS选择器实现交替背景 #

你之前用:nth-child失效，是因为选择器指向错误——你选中的是容器本身，而非容器内的行元素。修正选择器即可：

/* 给容器内的偶数行加背景 */
.js-container > .table__line:nth-child(even) {
  background-color: #f0f0f0;
}

/* 如需给奇数行设置样式，可添加 */
.js-container > .table__line:nth-child(odd) {
  background-color: #ffffff;
}

这里的>是直接子元素选择器，确保只选中.js-container下的.table__line元素，而不是容器本身或嵌套更深的元素。

方法三：用你已有的筛选逻辑给行加类 #

如果你坚持想用筛选后的结果来操作DOM，可以在生成HTML后，遍历所有行并根据索引添加类：

function renderHTML() {
  let playersHTML = '';
 
  positionOfPlayers.forEach((player) => {  
      playersHTML+= `
        <div class="table__line grid">
          <p class="img"><img src="${player.image}"></p>
          <p class="text">${player.name}</p>
          <p class="text col"><span>${player.votes.count}</span><button id="${player.id}" class="vote-btn">vote now</button><span class="small">${player.votes.recommendation}</span></p>
          <p class="text">${player.earnings}</p>
        </div>`;
      })
      const container = document.querySelector('.js-container');
      container.innerHTML = playersHTML;
      
      // 遍历所有行，给奇数索引的行加类（和你之前的筛选逻辑一致）
      container.querySelectorAll('.table__line').forEach((row, index) => {
          if (index % 2 !== 0) {
              row.classList.add('table__line--alternate');
          }
      });
}

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