Question

有人可以给我一些指导，说明最好的方法是什么。

我正在尝试获取“.main”

之后的所有文字

我知道这可能很简单，但是在圣诞节前夕它一整天都在我脑中捡。所以我想的不是强调自己，而是寻求一些指导。

示例代码仅返回Text in P tag，但我想带回Text not in it's own element和p tag

console.log($("#container").find(".main").next().text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="main"> WOOP IN MAIN </div>
  Text not in it's own element
  <p> Text in P tag </p>
</div>

Answer 1

实现此目标的最简单方法是clone()容器，从中移除.main元素，然后获取text()，如下所示：

＆＃13;

var text = $("#container").clone().find('.main').remove().end().text();
console.log(text.trim());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="main"> WOOP IN MAIN </div>
  Text not in it's own element
  <p> Text in P tag </p>
</div>

＆＃13;

您可以以递归方式遍历.main元素后面的DOM节点，但这要复杂得多，并给出相同的结果。

Answer 2

这是因为Text not in it's own element被视为text节点，因此next()将定位<p/>标记，因为它是HTMLElement。如果你是本地人，你会使用nextSibling的组合，这是两种节点类型的不可知和nextElementSibling，正如它的方法名所暗示的那样，抓住下一个兄弟元素< /强>：

const main = document.querySelector('.main'); const txt = [ main.nextSibling.textContent.trim(), main.nextElementSibling.textContent.trim() ]; console.log(txt)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="container"> <div class="main"> WOOP IN MAIN </div> Text not in it's own element <p> Text in P tag </p> </div>

在某个元素（JavaScript或JQuery）之后获取文本

2 个答案: