javascript - 查找并选择不包含按钮的 "li"

Question

我想获取任何子节点中不包含按钮的“li”的数量

我尝试使用 filter、:not、:contains、queryselector 和其他方式，但其中任何一种都给出了预期的结果。

<ul class="jSC57">
  <div class="PZuss">
    <li>
      <div>
        <p>test1</p>
      </div>
      <div>
        <button class="_0mzm- sqdOP  L3NKy   _8A5w5" type="button">Demandé</button>
      </div>
    </li>
    <li>
      <div>
        <p>test2</p>
      </div>
      <div>
        <button class="_0mzm- sqdOP  L3NKy   _8A5w5" type="button">Demandé</button>
      </div>
    </li>
    <li>
      <div>
        <p>test3</p>
      </div>
      <div>
      </div>
    </li>
    <li>
      <div>
        <p>test4</p>
      </div>
      <div>
        <button class="_0mzm- sqdOP  L3NKy   _8A5w5" type="button">Demandé</button>
      </div>
    </li>
  </div>
</ul>

期望的输出是 1 匹配第三个 li 与文本“test3”

Answer 1

您可以结合使用 :not() 和 :has()

$(".jSC57 li:not(:has(button))")

工作演示

console.log($(".jSC57 li:not(:has(button))").find("p").text())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="jSC57">
  <div class="PZuss">
    <li>
      <div>
        <p>test1</p>
      </div>
      <div>
        <button class="_0mzm- sqdOP  L3NKy   _8A5w5" type="button">Demandé</button>
      </div>
    </li>
    <li>
      <div>
        <p>test2</p>
      </div>
      <div>
        <button class="_0mzm- sqdOP  L3NKy   _8A5w5" type="button">Demandé</button>
      </div>
    </li>
    <li>
      <div>
        <p>test3</p>
      </div>
      <div>
      </div>
    </li>
    <li>
      <div>
        <p>test4</p>
      </div>
      <div>
        <button class="_0mzm- sqdOP  L3NKy   _8A5w5" type="button">Demandé</button>
      </div>
    </li>
  </div>
</ul>