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

Question

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> 中的所有内容，除了选中 <input> 的 <span>。然后打印出修改后的 HTML.

的 .text()

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

我假设 .end() 将 .find() 的 "exit out"，但事实并非如此。我该如何纠正这个问题，或者有更好的方法吗？

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

Answer 1

我是trial-and-error随机发现的。结果我需要三个 .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>

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

jQuery's .end() doesn't work as expected after .contents()?

jquery

jquery-selectors

jquery-end