Question

似乎.text()不在乎.not()，或者我既不了解jQuery的链接如何工作，也不了解.not()的工作方式。

是否有更好的方法从$("#bar")中过滤出$("#foo")并获取文本内容？

t = $("#foo").not("#bar").text()

$("#output").text(t)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p><span id="foo">Hello <span id="bar">World</span></span></p>
<p>EXPECTED OUTPUT: Hello</p>
<p>ACTUAL OUTPUT: <span id="output"></span></p>
</body>

Answer 1

您可以获取.contents()，然后使用jQuery的.not()函数版本过滤掉不需要的元素，然后获取.text()。

t = $("#foo").contents().not( $("#bar") ).text();

$("#output").text(t)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <p><span id="foo">Hello <span id="bar">World</span></span>
  </p>
  <p>EXPECTED OUTPUT: Hello</p>
  <p>ACTUAL OUTPUT: <span id="output"></span></p>
</body>

Answer 2

仅从ID获取文本节点

t = $("#foo").contents().filter(function(){ 
  return this.nodeType == 3; 
})[0].nodeValue
$("#output").text(t)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p><span id="foo">Hello <span id="bar">World</span></span></p>
<p>EXPECTED OUTPUT: Hello</p>
<p>ACTUAL OUTPUT: <span id="output"></span></p>
</body>

Answer 3

您误会了 .not（）的工作方式。文档说：

从匹配的元素集中删除元素。

因此，应使用它过滤一组元素，而不是元素的内容。

例如：

t = $(".foo").not(".bar").text()

$("#output").text(t)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <p>
    <span class="foo">Hello</span>
    <span class="foo bar">World</span>
  </p>
  <p>EXPECTED OUTPUT: Hello</p>
  <p>ACTUAL OUTPUT: <span id="output"></span></p>
</body>

有许多选项可以实现所需的目标，每种解决方案都取决于代码中涉及的其他因素。例如，您可以这样做（但是效率很低）：

t = $("#foo")
  .clone() // Avoid changing the element on the DOM
  .find("#bar")
  .remove()
  .end() // get back to the #foo chain
  .text()

$("#output").text(t)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <p>
    <span id="foo">Hello <span id="bar">World</span></span>
  </p>
  <p>EXPECTED OUTPUT: Hello</p>
  <p>ACTUAL OUTPUT: <span id="output"></span></p>
</body>

如何使$（“＃foo”）。not（“＃bar”）。text（）工作？

3 个答案: