jQuery 的 .end() 在 .contents() 之后不能按预期工作？

Posted 2023-05-09

【中文标题】jQuery 的 .end() 在 .contents() 之后不能按预期工作？

【英文标题】：jQuery's .end() doesn't work as expected after .contents()?

【发布时间】：2019-10-21 10:46:48

【问题描述】：

a = $("table").clone().find("p:has(input)").contents().not("span:has(input:checked)").remove().end().text()
b = $("table").clone().find("p:has(input)").contents().not("span:has(input:checked)").text()
c = $("table").clone().find("p:has(input)").contents().not("span:has(input:checked)").empty().end().text()
d = $("table").clone().text()

$("#a").text(a)
$("#b").text(b)
$("#c").text(c)
$("#d").text(d)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>
        <p>
          <span><input type="checkbox" disabled="disabled">1</span>
          <span><input type="checkbox" disabled="disabled" checked="checked">2</span>
          <span><input type="checkbox" disabled="disabled">3</span>
        </p>
      </td>
    </tr>
  </tbody>
</table>

A: <span id="a"></span><br/>
B: <span id="b"></span><br/>
C: <span id="c"></span><br/>
D: <span id="d"></span><br/>
EXPECTED: Foo 2

我的逻辑是找到删除<p> 中的所有内容，除了<span> 已选中<input>。然后打印出修改后的 html 的.text()。

我知道 jQuery 语句部分正确，因为b 正确选择了应该删除的两个选项，即1 和3。只是不确定如何让 jQuery 仅输出 Foo 2。

我假设.end() 将“退出”.find()，但事实并非如此。我该如何纠正这个问题或有更好的方法来做到这一点？

最后，我需要一个没有（匿名）函数的单行 jQuery 语句，因为我使用的工具只支持单行 jQuery 语句。嵌套很好，即$("foo").find($("bar"))。我最终只想提取此 HTML 的 .text()，因此我想删除未检查相应输入的文本。

【参考方案1】：

我是通过反复试验随机发现的。事实证明我需要三个.end() 电话。

我猜一个关闭.not()，一个关闭.contents，最后一个关闭.find()???

a = $("table").clone().find("p:has(input)").contents().not("span:has(input:checked)").remove().end().text()
b = $("table").clone().find("p:has(input)").contents().not("span:has(input:checked)").text()
c = $("table").clone().find("p:has(input)").contents().not("span:has(input:checked)").empty().end().text()
d = $("table").clone().text()
answer = $("table").clone().find("p:has(input)").contents().not("span:has(input:checked)").empty().end().end().end().text()

$("#a").text(a)
$("#b").text(b)
$("#c").text(c)
$("#d").text(d)
$("#answer").text(answer)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>
        <p>
          <span><input type="checkbox" disabled="disabled">1</span>
          <span><input type="checkbox" disabled="disabled" checked="checked">2</span>
          <span><input type="checkbox" disabled="disabled">3</span>
        </p>
      </td>
    </tr>
  </tbody>
</table>

A: <span id="a"></span><br/>
B: <span id="b"></span><br/>
C: <span id="c"></span><br/>
D: <span id="d"></span><br/>
EXPECTED: Foo 2<br/>
ANSWER: <span id="answer"><span>

【讨论】：

试试answer = $("table").clone().find("span:not(:has(input:checked))").remove().end().text();