Как добавить класс в div с соседним братом, используя javascript или реагировать?

Question

я хочу добавить класс в div с соседним селектором родного брата.

Ниже приведен код html,

<div class="wrapper">
    <div class="prev_div">previous</div>
    <div class="next_div">next</div>
</div>

Я хочу добавить свойство margin в div с классом "prev_div". Я попытался сделать это с css, как показано ниже,

.wrapper div.prev_div + div.next_div {
    margin: 10px;
 }

Но вышеупомянутое добавляет поле в div с классом next_div, вместо этого я хотел стиль поля для prev_div.

Так что я попытался сделать то же самое, используя javascript, найдя элемент с помощью prev_div и next_div. если next_div присутствует, добавление класса «дополнительный» к prev_div. если добавлен дополнительный класс, и если next_div отсутствует, удалите дополнительный класс для prev_div. но это не работает ... есть задержка удаления класса, добавленного, когда next_div отсутствует.

render = () => {
    const prev_div = document.querySelector('wrapper div.prev_div');
    const next_div = document.querySelector('wrapper div.prev_div + div.next_div');
    if (next_div) {
        prev_div.classList.add('additional');
    } else {
        if (prev_div && prev_div.classList.contains('additional')) {
            prev_div.classList.remove('additional');
        }
    }
}

Может кто-нибудь помочь мне исправить это или предоставить лучшее решение для этого. спасибо.

Answer 1

На самом деле ваш js код работает, просто пропущена точка. перед упаковщиком

 const prev_div = document.querySelector(".wrapper div.prev_div");
      const next_div = document.querySelector(
        ".wrapper div.prev_div + div.next_div"
      );
      console.log("prev_div", prev_div);
      console.log("next_div", next_div);
      if (next_div) {
        prev_div.classList.add("additional");
      } else {
        if (prev_div && prev_div.classList.contains("additional")) {
          prev_div.classList.remove("additional");
        }
      }

.additional {
        margin: 10px;
      }

 <div class="wrapper">
      <div class="prev_div">previous</div>
      <div class="next_div">next</div>
 </div>

Также есть более красивое решение для добавления класса к элементу, у которого есть следующий брат

const elem = document.querySelector(".prev_div");
      const isNexSibling = elem => {
        const nextSibling = elem.nextElementSibling;
        if (nextSibling) {
          elem.classList.add("additional");
        }
      };
      isNexSibling(elem);