时间戳

首页 > 解决方案 > 如何使用javascript或react将类添加到具有相邻兄弟的div？

javascript - 如何使用javascript或react将类添加到具有相邻兄弟的div？

问题描述

我想向具有相邻兄弟选择器的 div 添加一个类。

下面是html代码，

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

我想使用类“prev_div”将边距属性添加到 div。我尝试使用 css 来做到这一点，如下所示，

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

但是上面添加了具有类 next_div 的 div 的边距，而不是我想要 prev_div 的边距样式。

所以我尝试通过使用 prev_div 和 next_div 查找元素来使用 javascript 做同样的事情。如果 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');
        }
    }
}

有人可以帮我解决这个问题或提供更好的解决方案来做到这一点。谢谢。

标签： javascripthtmlcssreactjs

解决方案

实际上您的 js 代码正在运行，只是错过了 dot 。在包装之前

 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);

推荐阅读