Как выбрать элементы между двумя "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>

Я хочу выбрать все между заголовком объяснения и заголовком стенограммы, используя jQuery, но у меня возникают проблемы с получением текста вообще. Мой текущий jQuery, чтобы получить это следующим образом:

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

Но сейчас я вообще не выделяю текст. Кроме того, я не уверен, как получить только текст a и p, а не текст таблицы. Ребята, любая помощь, которую вы мне могли бы оказать, была бы очень признательна, спасибо!

Answer 1

Вам нужно использовать :has() селектор для выбора h2 имеет конкретного ребенка и использовать .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

Следующее исключает таблицу и карты для массива текста каждого элемента, так что вы можете отделить каждый текстовый блок. Если в элементах нет пробелов, то выполняется 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() просто чтобы было понятно, где находится разделитель... отрегулируйте соответственно