JS querySelectorAll for

Question

Cкрипт по идее должен искать у span класс active и потом выполнять действие.

Использую для этого querySelectorAll, но нужно зациклить, чтобы работало через for, я так понимаю, но не получается.

let div = document.querySelectorAll('#naviwka span');

if (div.classList.contains('active')) {
  div.scrollIntoView({
    inline: "center"
  });

} else {
  alert('Class does not exist');
}

<header class="example-one-header scroll">
  <nav class="vertical-align-middle" id="naviwka">
    <span class="nav-item">HOME</span>
    <span class="nav-item">ABOUT US</span>
    <span class="nav-item">POSSIBILITIES</span>
    <span class="nav-item">IMMERSE</span>
    <span class="nav-item">WHY OCTAGON?</span>
    <span class="nav-item active" id="nav_it">BUILD YOUR FUTURE</span>
  </nav>
</header>

Answer 1

querySelectorAll возращает NodeList, у котрого есть метод forEach. Применить его можно так:

const spans = document.querySelectorAll('#naviwka span');

spans.forEach((span) => {
  if (span.classList.contains('active')) span.classList.add('sure');
  else console.log('Class does not exis');
});

.nav-item.active.sure {
  color: red;
}

<header class="example-one-header scroll">
  <nav class="vertical-align-middle" id="naviwka">
    <span class="nav-item">HOME</span>
    <span class="nav-item">ABOUT US</span>
    <span class="nav-item">POSSIBILITIES</span>
    <span class="nav-item">IMMERSE</span>
    <span class="nav-item">WHY OCTAGON?</span>
    <span class="nav-item active" id="nav_it">BUILD YOUR FUTURE</span>
  </nav>
</header>

Но, если вам просто нужно найти элемент, у которого есть класс active, то можно обойтись и без цикла и воспользоваться методом querySelector:

const span = document.querySelector('#naviwka span.active');

span.classList.add('sure');

.nav-item.active.sure {
  color: red;
}

<header class="example-one-header scroll">
  <nav class="vertical-align-middle" id="naviwka">
    <span class="nav-item">HOME</span>
    <span class="nav-item">ABOUT US</span>
    <span class="nav-item">POSSIBILITIES</span>
    <span class="nav-item">IMMERSE</span>
    <span class="nav-item">WHY OCTAGON?</span>
    <span class="nav-item active" id="nav_it">BUILD YOUR FUTURE</span>
  </nav>
</header>

БЛОГ НА HUSL

JS querySelectorAll for

Ответы (1 шт):