如何实现视频左右分栏展示且不重复，避免同一div内数据重复显示

问题原因 #

你当前的代码逻辑是遍历每一条视频数据时，都生成包含左右两列的完整行，且两个列都绑定了当前遍历到的同一条视频数据，所以每条视频都会重复出现在同一行的左右两栏。另外你代码里的jQuery选择器也存在错误，$("video1")需要改成$("#video1")，添加#才是正确的ID选择器写法，否则会找不到挂载元素。

修正方案 #

我们可以把接口返回的视频列表按2个为一组拆分，每一组对应一行布局，组内的第1条数据放在左列，第2条放在右列，若总数据量为奇数，最后一行的右列自动留空即可。

修正后的JS代码如下：

const display = (id) => {
  axios.get(`${url}category?=${id}`)
    .then(function(res) {
      if (res.data.status == 'success') {
        const videos = res.data.result;
        // 按2个一组拆分视频列表
        const groupList = [];
        for (let i = 0; i < videos.length; i += 2) {
          groupList.push(videos.slice(i, i + 2));
        }
        // 遍历每一组生成对应行
        groupList.map(group => {
          $("#video1").append(`
            <div class="nk-block">
              <div class="row g-gs">
                <!-- 左列：渲染组内第一个视频 -->
                <div class="col-xl-6">
                  <div class="card card-bordered h-100">
                    <div class="card-inner">
                      <div class="align-end gy-3 gx-5 flex-wrap flex-md-nowrap flex-xl-wrap">
                        <div class="nk-sale-data-group flex-md-nowrap g-4">
                          <iframe width="430" height="300" src="${group[0].video}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                      </div>
                      <div class="card-title-group align-start mb-2" style="margin-top: 30px;">
                        <div class="card-title" style="margin-bottom: 0px;"><h6 class="title">${group[0].title}</h6></div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 右列：组内存在第二个视频才渲染 -->
                ${group[1] ? `
                <div class="col-xl-6">
                  <div class="card card-bordered h-100">
                    <div class="card-inner">
                      <div class="align-end gy-3 gx-5 flex-wrap flex-md-nowrap flex-xl-wrap">
                        <div class="nk-sale-data-group flex-md-nowrap g-4">
                          <iframe width="430" height="300" src="${group[1].video}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                      </div>
                      <div class="card-title-group align-start mb-2" style="margin-top: 30px;">
                        <div class="card-title" style="margin-bottom: 0px;"><h6 class="title">${group[1].title}</h6></div>
                      </div>
                    </div>
                  </div>
                </div>
                ` : ''}
              </div> 
            </div>
          `);
        })
      }
    });
}

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