如何在不使用JQuery的情况下从元素的兄弟元素中移除类

How to remove class from siblings of an element without JQuery?

本文关键字：元素 兄弟 情况下 JQuery      更新时间：2023-09-26

我正在向元素添加一个类，并希望从兄弟元素中删除它。在JQuery中，这很简单，但如何在纯JS中做到最好呢?下面是我的代码示例:

<div class="controllers">
  <span id='one' class='active'></span>
  <span id='two'></span>
  <span id='three'></span>
</div>
firstBtn.onclick = function() {
  slides[0].className = 'slide active';
  this.className = 'active';
};

你可以在点击事件中使用循环从所有元素中移除active类，然后再次在被点击的元素中设置它。

var el = document.querySelectorAll('.controllers span');
for (let i = 0; i < el.length; i++) {
  el[i].onclick = function() {
    var c = 0;
    while (c < el.length) {
      el[c++].className = 'slide';
    }
    el[i].className = 'slide active';
  };
}
.active {
  color: red;
}
<div class="controllers">
  <span id='one' class='active'>Lorem</span>
  <span id='two'>Lorem</span>
  <span id='three'>Lorem</span>
</div>

设置一个活动元素的通用函数是:

const setActive = el => {
    [...el.parentElement.children].forEach(sib => sib.classList.remove('active'));
    el.classList.add('active')
    }

在你的例子中:

let spans = [...document.body.querySelectorAll('.controllers > span')];
spans.forEach(el => el.addEventListener('click', e => setActive(el)))

小提琴:https://jsfiddle.net/9j1qguac/

更新:浏览器一度期望Array.from(el.parentElement.children)而不是[...el.parentElement.children]。现在两者都支持，但是如果用括号开始一行，则前一行需要一个分号。(例如，a = b 'n [1].map...将被视为a = (b[1]).map...。

从同级中移除一个类

var el = document.getElementById( "two" );
var one = el.previousSibling();
one.classList.remove("active");

使用previousSibling或nextSibling遍历到它，并使用classList。Remove删除一个类。

从兄弟元素中移除一个类 

let elem = document.getElementById('id');
let siblings = elem.parentElement.children;
  for(let sib of siblings) {
      sib.classList.remove('active')
      }
相关文章：