Как удалить класс всех родственных элементов при щелчке по элементу внутри jquery каждого цикла

Question

Я перебираю группу элементов одного класса. Теперь, когда элемент щелкают, мне нужно, чтобы он получил класс, который делает его активным и добавляет к нему css. Это работает, но остается навсегда, поэтому, если я щелкну 4 элемента, у меня будет 4 активных элемента.

Я пытаюсь удалить класс из всех элементов-братьев при нажатии 1, но приведенный ниже код по какой-то причине не работает :

    $('.klantenblokje').each(function(i, obj) {
        $(this).on("click", function(e){
             e.preventDefault();
             var id = $(this).attr('id');
             $(this).addClass('activeblok');
             $(this).siblings().removeClass('activeblok');
     });
    });

Еще пробовал:

    $('.klantenblokje').each(function(i, obj) {
        $(this).on("click", function(e){
             e.preventDefault();
             var id = $(this).attr('id');
             $(this).addClass('activeblok').siblings().removeClass('activeblok');
     });
    });

Почему не работает? Класс добавляется, когда я нажимаю, но для братьев и сестер ничего не удаляется.

My HTML если это помогает:

    <div class="col-md-2 col-6">
      <a href="#bezorgen" id="bezorgen" class="klantenblokje">
        <i class="icon-transport"></i>
        <span>Bezorgen</span>
      </a>
    </div>
    <div class="col-md-2 col-6">
      <a href="#bestellen" id="bestellen" class="klantenblokje">
        <i class="icon-cart"></i>
        <span>Bestellen</span>
      </a>
    </div>
    <div class="col-md-2 col-6">
      <a href="#betalen" id="betalen" class="klantenblokje">
        <i class="icon-euro"></i>
        <span>Betalen</span>
      </a>
    </div>
    <div class="col-md-2 col-6">
      <a href="#uploaden" id="uploaden" class="klantenblokje">
        <i class="icon-upload"></i>
        <span>Bestanden uploaden</span>
      </a>
    </div>
    <div class="col-md-2 col-6">
      <a href="#garantie-reparatie" id="garantie-reparatie" class="klantenblokje">
        <i class="icon-box"></i>
        <span>Garantie en reparatie</span>
      </a>
    </div>
    <div class="col-md-2 col-6">
      <a href="#account" id="account" class="klantenblokje">
        <i class="icon-user"></i>
        <span>Account</span>
      </a>
    </div>

Answer 1

• Так как ваши элементы <a> не являются братьями и сестрами, сначала кешируйте их
• (Нет необходимости использовать .each() jQuery уже работает с коллекциями)
• Используйте кешированный Элементы вместо .siblings()
• Используйте .not(this), чтобы отфильтровать текущий

const $blokje = $('.klantenblokje'); // Cache your elements

$blokje.on("click", function(e) {
    e.preventDefault();
    // var id = $(this).attr('id');
    $blokje.not(this).removeClass('activeblok');
    $(this).addClass('activeblok');
});

.activeblok { background: fuchsia; }

<div class="col-md-2 col-6">
  <a href="#bezorgen" id="bezorgen" class="klantenblokje">
    <i class="icon-transport"></i>
    <span>Bezorgen</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#bestellen" id="bestellen" class="klantenblokje">
    <i class="icon-cart"></i>
    <span>Bestellen</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#betalen" id="betalen" class="klantenblokje">
    <i class="icon-euro"></i>
    <span>Betalen</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#uploaden" id="uploaden" class="klantenblokje">
    <i class="icon-upload"></i>
    <span>Bestanden uploaden</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#garantie-reparatie" id="garantie-reparatie" class="klantenblokje">
    <i class="icon-box"></i>
    <span>Garantie en reparatie</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#account" id="account" class="klantenblokje">
    <i class="icon-user"></i>
    <span>Account</span>
  </a>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

.siblings () выбирает элементы в единственном родителе. Все ваши элементы <a> имеют разных родителей. Вот почему вы не можете использовать .siblings () в этом случае.

Но вы можете использовать что-то вроде:

$('.klantenblokje').removeClass('activeblok');
$(this).addClass('activeblok');