jQuery的.end()在.contents()之后无法正常工作?

时间:2019-06-05 22:11:02

标签: jquery jquery-selectors jquery-end

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>的{​​{1}}之外)。然后打印出修改后的HTML的<input>

我知道jQuery语句部分正确,因为.text()正确选择了应该删除的两个选项,即b1。只是不确定如何仅使jQuery输出3

我假设Foo 2将从.end()中退出,但事实并非如此。我该如何纠正呢?还是有更好的方法呢?

最后,我需要没有(匿名)功能的单行jQuery语句,因为我使用的工具仅支持单行jQuery语句。嵌套很好,即.find()。我最终只想提取此HTML的.text(),因此我想删除未选中相应输入的文本。

1 个答案:

答案 0 :(得分:0)

我是通过反复试验随机发现的。原来,我需要三个.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>