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

问题

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

My logic is to find remove everything inside <p> EXCEPT for the <span> that has the checked <input>. Then print out the .text() of that modified HTML.

I know the jQuery statement is partially correct since b correctly selects the two options that should be removed, ie 1 and 3. Just not sure how to make jQuery output Foo 2 only.

I assume .end() will "exit out" of the .find(), but it's not. How do I correct this or is there a better way to do this?

Lastly, I need a one-line jQuery statement without (anonymous) functions, since the tool I'm using only supports one-liner jQuery statements. Nesting is fine, ie $("foo").find($("bar")). I eventually just want to extract the .text() of this HTML, hence I want to remove the text whose respective input isn't checked.

回答1:

I randomly found out by trial-and-error. It turns out I needed three .end() calls.

I guess one closes the .not(), one closes the .contents, and the last one closes the .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>

来源：https://stackoverflow.com/questions/56468706/jquerys-end-doesnt-work-as-expected-after-contents

标签

jquery

jquery-selectors

jquery-end