如何在jQuery中获取父母的特定下一个和前一个兄弟姐妹的孩子？

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标记，并从那里我得到下一个和preareious h2标签。 .find应该让我链接，最后.attr(href)会让我的属性。

现在，上一个和下一个元素可能不存在。为什么我无法获得正确的链接？我所得到的是undefined。作为一个例子，如果我在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');