将 jQuery 的兄弟 function 转换为香草 Javascript

Question

我正在努力将 jQuery 转换为香草 Javascript 并面临兄弟姐妹的问题。

这是我的代码：

   const right = document.querySelector('.right');
   const bullets = document.getElementsByClassName('bullets')
   right.addEventListener('click', function(){
    const has = document.querySelector('.swiper-pagination-bullet-active').getAttribute('aria-label');
    const idx = Number(has.substr(12,1))-1;
  

我想做的是，如果其中一颗子弹具有“活动”class，则其他子弹不能带兄弟姐妹。 所以写了这样的代码

   bullets[idx].classList.add('active');
    let siblings = bullets.parentElement.children;
    for(let sib of siblings) {
        sib.classList.remove('active')
      }
   });

bullets[idx].classList.add('active'); 正在工作，但下面的代码现在正在工作。 谁能帮我解决这个问题？

Answer 1

jQuery siblings()不会将您调用它的元素放在列表中。 您的代码确实如此，b/c children包括所有孩子。 bullets.parentElement不起作用，项目bullets是列表而不是元素。 对于bullets[idx]的兄弟姐妹，请执行以下操作：

bullets[idx].classList.add('active')
for(let sib of bullets[idx].parentElement.children) {
  if (sib !== bullets[idx]) {
    sib.classList.remove('active')
  }
}

或者在添加到bullet[idx]之前从所有孩子中删除 class 。