在某些元素(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被认为是一个文本节点,因此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>