在另一个元素之后找到具有特定 class/tag 名称的第一个元素

Question

我有一个如下所示的网页：

<h1 id="a">A</h1>
contents
<p class="paragraph">stuff</p>
more contents

<h1 id="b">B</h1>
contents
<p class="paragraph">stuff I need</p>
more contents

<h1 id="c">C</h1>
contents
<p class="paragraph">stuff</p>
more contents

et cetera

如何 select id="b" 标题后的 <p class="paragraph"> 标签（内容 "stuff I need"）？

我考虑过在 $("h1") 中找到 <h1 id="b">B</h1> 的索引，然后在 $("p.paragraph") 中访问该索引，但这在我的特定情况下不起作用。

编辑：一个更好的例子：https://jsfiddle.net/n7zstmw8/

Answer 1

select是：

$('#b + .paragraph')

Next Adjacent Selector (“prev + next”): Selects all next elements matching "next" that are immediately preceded by a sibling "prev".

片段：

$(function () {
  console.log($('#b + .paragraph').text());
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<h1 id="a">A</h1>
contents
<p class="paragraph">stuff</p>
more contents

<h1 id="b">B</h1>
contents
<p class="paragraph">stuff I need</p>
more contents

<h1 id="c">C</h1>
contents
<p class="paragraph">stuff</p>
more contents

如果下一个元素不相邻，您可以使用 nextAll:

$(function () {
  console.log($('#b').nextAll('.paragraph:first').text());
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<h1 id="a">A</h1>
<span class="inbetween">In between stuff</span>
<p class="paragraph">stuff</p>
<span class="inbetween">In between stuff</span>

<h1 id="b">B</h1>
<span class="inbetween">In between stuff</span>
<div class="moreinbetween">
    More stuff
</div>
<p class="paragraph">stuff I need</p>
<span class="inbetween">In between stuff</span>

<h1 id="c">C</h1>
<span class="inbetween">In between stuff</span>
<p class="paragraph">stuff</p>
<span class="inbetween">In between stuff</span>

在另一个元素之后找到具有特定 class/tag 名称的第一个元素

Find the first element with a certain class/tag name after another element

html

javascript

jquery

jquery-selectors