Как избавиться от этой конструкции forEach?

Question

[godsplan]

const delegateHandler = (selector, handler) => event => {
  const possibleTarget = event.target.closest(selector)
  if (possibleTarget) {
    event.delegateTarget = possibleTarget
    handler(event)
  }
}

document.addEventListener('click', delegateHandler('.tab-nav_item', (event) => {
  let tabContent = document.querySelectorAll('.tab-content');
  let dataTab = event.delegateTarget.getAttribute('data-tab')

  tabContent.forEach(elem => {
    let dataContent = elem.getAttribute('data-content')
    let navTabs = document.querySelectorAll('.tab-nav_item')
    navTabs.forEach(elem => {
      elem.classList.remove('active')
    });
    event.delegateTarget.classList.add('active')
    if (dataTab == dataContent) {
      elem.classList.add('active')


    } else {
      elem.classList.remove('active')


    }
  })

Сейчас для того чтобы при клике добавить класс к .tab-nav_item и убрать с остальный мне приходится использовать forEach и задавать переменную navTabs
Есть ли какое то решение которое позволит мне добавить класс на event.delegateTarget и убрать эти классы с остальных похожих элементов?

Comments

[lUser L]

Либо циклом, либо берете jq и делаете в одну строчку (оно под капотом тоже делает цикл)

$(this).addClass('active')
           .siblings()
           .removeClass('active');

либо манипулируете

el.previousElementSibling; \ el.nextElementSibling;

Answer 1

[Алексей Уколов]

Можно написать код чуть иначе, но принципиально отказаться от итерирования нельзя.

Comments

[godsplan]

А иначе это как?Возомжно я вообще не тем путем пошел для создания табов, можете подсказать какой-то верный вариант с делегированием?

[Алексей Уколов]

Вы пошли тем путём, другого пока не придумали.

Answer 2

[ThunderCat]

Любая работа с массивами или другими итерируемыми сущностями базируется на циклах, они могут быть присыпаны СС, но внутри все равно будет цикл, даже если пользоваться трюками типа рекурсивного мап - суть не поменяется - цикл, перебор, ветвление...

Comments

[Алексей Уколов]

Полагаю, автор надеялся, что в стандартном апи браузера есть метод, который это инкапсулирует.

Answer 3

[Rsa97]

Если элемент с классом active всегда только один, то можно

document.querySelector('.tab-nav_item.active')?.classList?.remove('active');

Comments

[godsplan]

ну тут я все равно обращаюсь к элементу на прямую, а хотелось бы чтобы вместо tab-nav_item могло быть что угодно

[godsplan]

или может быть есть способ просто переключать класс на кнопке таба как это сейчас происходит с самим табом,
прост я не хочу такую конструкцию, она выглядит как то не очень:

elem.classList.remove('active');
elem.classList.add('active');

То есть то что я сначала со всех убираю, а потом добавляю, я хочу именно переключение.

[Rsa97]

godsplane, Убрать "со всех" можно только циклом, это не jQuery, в котором, тем не менее, под капотом тот же цикл.

[godsplan]

Rsa97, я имею ввиду что я не хочу именно "убирать" со всех, а хочу переключать.
По логике ведь так и надо.

[Rsa97]

godsplane, Значит у вас всего два варианта - хранить предыдущий активный элемент или искать его. Учитывая производительность современных компьютеров разницы в скорости между этими двумя вариантами вы не заметите.

[Алексей Уколов]

Нет такого действия "переключение" - вы именно что убираете класс у одного элемента и добавляете другому и иначе никак.

[godsplan]

Можете плз подскзаать что значит вообще эта конструкция?
elem?.classList.add

[Rsa97]

godsplane, https://developer.mozilla.org/en-US/docs/Web/JavaS...

[Rsa97]

godsplane,

document.querySelector('.foo'); // null

document.querySelector('.foo').classList;
// Uncaught TypeError: document.querySelector(...) is null

document.querySelector('.foo')?.classList; // undefined

document.querySelector('.foo').classList.add('active');
// Uncaught TypeError: document.querySelector(...) is null

document.querySelector('.foo')?.classList?.add('active'); // undefined

[godsplan]

Rsa97, это используется как вместо проверки на наличие элемента?