查找并选择不包含按钮的“li”答案

【问题标题】：find and select "li" that didn't contain a button查找并选择不包含按钮的“li”
【发布时间】：2019-05-26 10:28:48
【问题描述】：

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

我尝试使用过滤器、: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”

【问题讨论】：

您的 HTML 无效。 ul 唯一允许的直接子元素是 li。请在询问之前确保您的 HTML 有效。
$("li:not(:has(button))").length; 看到这个答案：stackoverflow.com/a/4045507/3567063
@connexo 如果我错了或者我的 html 不是有效的 html，请不要回答我的问题。此 html 代码来自 instagram
@HaythemHADHAB 代码的来源对我们来说并不重要。如果代码不符合规范，那么关于该代码的行为就没有得到很好的定义，今天可能有效的建议明天可能就无效了
@General_Twyckenham，对，我同意，但是如果初学者问并得到这种答案，他或她将不会再问任何问题。

标签： javascript jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

$("ul[class="jSC57"] li:not(:has(button))");

【讨论】：

【解决方案3】：

.not()从匹配元素集中删除元素。

var item=$("li").not(":has(button)").length;
alert('li not containing button '+item);

https://jsfiddle.net/shoesheill/4dvmafre/10/

【讨论】：

【解决方案4】：

你可以结合: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>

【讨论】：