2

Я знаю, что есть nextElementSibling, но он получает лишь один следующий элемент, а как получить все последующие?

let st = document.querySelector('.st');
while (st) {
  let ast = st.nextElementSibling;
  console.log(ast);
}
<div>
  <div class="st">0</div>

  <div class="a">1</div>
  <div class="b">2</div>
  <div class="c">3</div>
  <div class="d">4</div>
</div>

Как получить все последующие элементы после блока с классом st, а после скрыть их?

6
  • Написать цикл. А может и вовсе надо для этого использовать CSS.
    – Alexey Ten
    28 янв 2022 в 5:46
  • Цикл с использованием nextElementSibling?
    – user480491
    28 янв 2022 в 5:48
  • Я еще плохо разбираюсь в js, Пробовал написать цикл, но как-то не вышло
    – user480491
    28 янв 2022 в 5:48
  • let st = document.querySelector('.st'); while (st){ let ast = st.nextElementSibling; console.log(ast); }
    – user480491
    28 янв 2022 в 6:28
  • 1
    А лучше бы вообще в CSS написать .st ~ * { display: none } и пусть браузер работает.
    – Alexey Ten
    28 янв 2022 в 6:45

1 ответ 1

3

В данном случае, проще получить коллекцию, с помощью определённого селектора, и работать уже с ней, чем каждую итерацию искать соседний элемент:

let st = [...document.querySelectorAll('.st ~ div')];
let i = 0;
do {
  console.log(st[i]);
  st[i].style.display = 'none';
} while (++i < st.length)
<div>
  <div class="st">0</div>

  <div class="a">1</div>
  <div class="b">2</div>
  <div class="c">3</div>
  <div class="d">4</div>
</div>

Или так:

let st = document.querySelectorAll('.st ~ div');
st.forEach(el => {
  console.log(el);
  el.style.display = 'none';
})
<div>
  <div class="st">0</div>

  <div class="a">1</div>
  <div class="b">2</div>
  <div class="c">3</div>
  <div class="d">4</div>
</div>

Ваш ответ

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

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