Vanilla JS：如果它们包含类 Bar<li> 的后代<div>，则将类 Baz 添加到类 Foo 的所有

Question

想要一个普通的 JS 解决方案，即没有 jquery 等

我在班级

Foo

的页面上有几个。

其中一些包含类 Bar（不是直接子级）。

我想添加班级Baz到任何Foo

包含班级Bar.

任何帮助都会很棒。非常感谢！

这就是我目前所拥有的。我确定 contains 语法是我弄错的地方。

const addClassTo = document.querySelectorAll('li.foo').contains('div.bar');
addClassTo.forEach((element) => {element.classList.add('baz');})

;

Answer 1

const addClassTo = Array.from(document.querySelectorAll('li.foo')).filter((ele) => ele.querySelector('div.bar'))
addClassTo.forEach((element) => {element.classList.add('baz');})

Answer 2

我会翻转逻辑——如果父类包含带有目标类的 div，我不会尝试向父类添加一个类——我会将 div 与目标类作为目标，然后向上遍历祖先树以找到最接近的元素“foo”类添加类以提供样式。这使用 element.closest() - (https://developer.mozilla.org/en-US/docs/Web/API/Element/closest)

这里包含目标div的div有一个绿色边框。这是因为元素的 parentNode 已被赋予 /baz/ 类。

我还添加了一个非 foo div 来演示选择器只查询 .foo .bar 元素。以及一个非直接的子 div - 以显示最接近的方法遍历树到父级的效果。

const bazDivs = document.querySelectorAll('.foo .bar')


bazDivs.forEach((element) => {
   element.closest(".foo").classList.add('baz')
})

div {
  padding: 8px;
  border:solid 1px;
} 

div + div {
  margin-top: 8px;
} 

.foo {
  border-color: red;
}

.bar {
  border-color: blue;
}

.baz {
  border-color: green;
}

.not-foo {
  border-color: black;
}

<div class="foo">
 does not have .bar
</div>

<div class="foo">
  <div class="bar">
    has .bar and is direct child
  </div>
</div>

<div class="foo">
  <div class="other-div">
   <div class="bar">
      has .bar and is not direct child
    </div>
  </div>
</div>

<div class="foo">
 does not have. bar
</div>

<div class="not-foo">
 does not have .foo or .bar
</div>

Answer 3

const fooElements = document.querySelectorAll('.foo');
fooElements.forEach((element) => {
  if (element.querySelector('.bar')) {
    element.classList.add('baz');
  }
});

Answer 4

您可以使用

:has

伪选择器来选择有孩子

.foo

的父母

.bar

。

示例（基于gavgrif的代码）：

document
  .querySelectorAll('.foo:has(.bar)')
  .forEach(el => {
    el.classList.add('baz')
  })

div {
  padding: 8px;
  border:solid 4px;
} 

div + div {
  margin-top: 8px;
} 

.foo {
  border-color: red;
}

.bar {
  border-color: blue;
}

.baz {
  border-color: green;
}

.not-foo {
  border-color: black;
}

<div class="foo">
 does not have .bar
</div>

<div class="foo">
  <div class="bar">
    has .bar and is direct child
  </div>
</div>

<div class="foo">
  <div class="other-div">
   <div class="bar">
      has .bar and is not direct child
    </div>
  </div>
</div>

<div class="foo">
 does not have. bar
</div>

<div class="not-foo">
 does not have .foo or .bar
</div>