在特定元素（JavaScript或JQuery）之后获取文本[重复]

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()，如下所示：

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

<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>

您也可以递归遍历 .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>