如何 select 两个 "h2" 之间的元素，除了使用 jquery 的一个元素？

Question

所以我正在使用这样设计的网站：

<h2>
  <span id="Explanation"> Explanation </span>
</h2>
<table> ... don't select anything in this table </table>
<a href="https://www.google.com/">hey</a>
<p> What's up? </p>
<p> How's life? </p>
<h2>
  <span id="Transcript"> Transcript </span>
</h2>
<p> Don't select this </p>

我想 select 使用 jQuery 解释 header 和文字记录 header 之间的所有内容，但我根本无法获取任何文本。我目前jQuery得到这个如下：

explanation = "";
explanation = $("h2 #Explanation").nextUntil("h2 #Transcript").text();

但是现在，我 select 根本没有任何文字。另外，我不确定如何只获取 a 和 p 文本而不是 table 文本。如果你们能给我任何帮助，我将不胜感激，谢谢！

Answer 1

您需要使用 :has() selector to select h2 has specific child and use .not() 从选择器集合中删除特定元素。

$("h2:has(#Explanation)").nextUntil("h2:has(#Transcript)").not("table").text();

var explanation = $("h2:has(#Explanation)").nextUntil("h2:has(#Transcript)").not("table").text();
console.log(explanation);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>
  <span id="Explanation"> Explanation </span>
</h2>
<table><tr><td>table</td></tr></table>
<a href="https://www.google.com/">hey</a>
<p> What's up? </p>
<p> How's life? </p>
<h2>
  <span id="Transcript"> Transcript </span>
</h2>
<p> Don't select this </p>

Answer 2

以下排除了 table 并映射到数组中每个元素的文本，以便您可以分隔每个文本块。如果元素中没有空格，那么整个集合中的运行 text() 将不会留下分隔符

var txt = $('#Explanation').parent().nextUntil('h2:has(#Transcript)').not('table').map(function() {
  return $(this).text()
}).get().join(' || ')

alert(txt)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2><span id="Explanation"> Explanation </span></h2>
<table>
  <tr>
    <td>... don't select anything in this table</td>
  </tr>
</table>
<a href="https://www.google.com/">hey</a>
<p>What's up?</p>
<p>How's life?</p>
<h2>
   <span id="Transcript"> Transcript </span>
 </h2>
<p>Don't select this</p>

在 join() 中使用了 " || " 分隔符只是为了让分隔符的位置变得明显...相应地调整

如何 select 两个 "h2" 之间的元素，除了使用 jquery 的一个元素？

How to select elements between two "h2" except one element using jquery?

html

javascript

jquery

selector

nextuntil