目标 parent div，但如果它包含嵌套 class

Question

我想使用 document.querySelectorAll 定位 parent div。但如果 div 包含嵌套的 div，并且带有特定的 class.

例如，在下面的示例中，我想抓取第一个 parent 和最后一个 floatContainer div。但不是这一秒，因为它包含 dropdown-container class.

document.querySelectorAll(".ej-form-field:not([dropdown-container])") 似乎不起作用。

console.log(document.querySelectorAll(".ej-form-field:not([dropdown-container])"))

<!-- GRAB THIS -->
<div id="floatContainer" class="ej-form-field">
  <label for="floatField">First name</label>
  <div class="input-container">
    <input id="floatField" class="ej-form-field-input-textbox" type="text">
  </div>
</div>

<!-- NOT THIS -->
<div id="floatContainer" class="ej-form-field">
  <label for="floatField">Last name</label>
  <div class="dropdown-container input-container">
    <input id="floatField" class="ej-form-field-input-textbox" type="text">
  </div>
</div>

<!-- GRAB THIS -->
<div id="floatContainer" class="ej-form-field">
  <label for="floatField">Telephone</label>
  <div class="input-container">
    <input id="floatField" class="ej-form-field-input-textbox" type="text">
  </div>
</div>

Answer 1

这段代码解决了你的问题。

console.log(document.querySelectorAll(".ej-form-field>div:not(.dropdown-container)"))

Answer 2

您必须针对特定的 class 而不是属性，即：

document.querySelectorAll(".ej-form-field:not(.dropdown-container))

Answer 3

我也找到了这个选项，它似乎也有效：

document.querySelectorAll("div.ej-form-field + :not(.dropdown-container)")

目标 parent div，但如果它包含嵌套 class

Target parent div, but not if it includes a nest class

javascript

forms

dom

document

dom-manipulation