如何在jQuery中获取父母的特定下一个和前一个兄弟姐妹的孩子?
问题描述:
这是标记:如何在jQuery中获取父母的特定下一个和前一个兄弟姐妹的孩子?
<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
。
谢谢。
答
的.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');
但该网站说,'.next'将'获取紧随其后的每个元素的兄弟在一套匹配elements.'的是'h2'不是正确的下一个兄弟姐妹与一个特定的选择器? –
我现在明白了。如果我错了,请纠正我。 '.next'和'.previous'不会继续寻找下一个特定的兄弟,除非它是匹配的,而只是查找直接元素。 –
@SanJeetSingh正确。这些方法只选择紧接着的或之前的元素。如果它不是'h2'元素,则不会选择任何内容。该方法不会继续寻找下一个'h2'元素。这就是为什么你会使用'.nextAll()'或'.prevAll()'来代替。这些方法将选择* all *以下或之前的'h2'元素,'.first()'将选择第一个。 –