javascript - 如何在 jQuery 中获取 parent 的特定下一个和 previous sibling 姐妹的 child ？

Question

这是标记:

<h2>
   <a href="link1.html">text One for link One</a>
</h2>
<p> More text related to link one</p>
<h2>
   <a href="link2.html">text Two for link Two</a>
</h2>
<p> More text related to link two</p>
<h2>
   <a href="link3.html">text Three for link Three</a>
</h2>
<p> More text related to link three</p>

这是 jQuery:

var prevLink = $(this).closest('h2').prev('h2').find('a').attr('href');
var nextLink = $(this).closest('h2').next('h2').find('a').attr('href');

.this 是初始链接。我的理解是，.closest 将带我到父 h2 标记，然后从那里我可以访问下一个和上一个 h2 标记。 .find 应该让我链接，最后 .attr(href) 会让我获得属性。

现在，上一个和下一个元素可能不存在。为什么我无法获得正确的链接？我得到的只是未定义。举个例子，如果我在 link2.html 上，我希望 prevLink 为 link1.html 和 nextLink为 link3.html。

谢谢。

Answer 1

.next()/.prev() 方法仅选择紧随其后或紧接其前的元素，这意味着如果 >h2 元素之间有一个同级 p 元素。

您可以改用 .nextAll()/.prevAll() 方法。然后链接 .first() 方法以获取集合中的第一个元素:

var prevLink = $(this).closest('h2').prevAll('h2').first().find('a').attr('href');
var nextLink = $(this).closest('h2').nextAll('h2').first().find('a').attr('href');