0

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>

2
  • 2
    Если вы хотите получить ровно один элемент, то зачем здесь цикл вообще? document.querySelector('#naviwka .nav-item.active').scrollIntoView({inline: "center"})
    – andreymal
    Commented 30 дек. 2022 в 14:21
  • Уже решил) хотел удалять вопрос. Ваш метод как говорится всё гениальное просто, работает)) Commented 30 дек. 2022 в 14:26

1 ответ 1

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>

1
  • 1
    Да, это оно, спасибо. Но уже сам разобрался) Отмечу как ответ. Commented 30 дек. 2022 в 14:37

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.