Question

我有以下html语法

<ul>
<li class="heading">link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li class="heading">link</li>    
<li>link</li>
<li>link</li>
<li>link</li>
<li class="heading">link</li>
</ul>

我想选择在我点击的普通li元素之后出现的第一个.heading元素。我尝试使用.closest（）函数，但我没有设法使它正确。使用jQuery

Answer 1

在click处理程序内执行：

$(this).nextAll('.heading:first');

nextAll()检索与选择器匹配的当前元素之后的所有兄弟节点，因此请使用:first选择器仅定位第一个。

nextAll不应与next混淆，closest仅考虑下一个元素（如果匹配给定的选择器，则仅返回它）。

http://jsfiddle.net/kuroir/5e3gz/1/无法正常工作，因为它只检查当前元素的祖先，因为我们想要检索兄弟姐妹。

你可以看到这个工作的JS小提琴; {{3}}

Answer 2

使用“相邻兄弟”选择器，这是加号：

$('.heading+li')

这会选择紧跟在li元素之后的所有class='heading'元素。

注意，这是标准的CSS，因此上面的选择器也可以在你的样式表中使用（除了IE6以外的所有浏览器都支持），如下所示：

.heading+li { .... }

另请参阅http://quirksmode.org/css/selector_adjacent.html，了解此选择器的工作原理。

Answer 3

你可以这样做：

$('li').click(function(){
    $(this).nextAll('li.heading:first'); //This selects the one you want
});

检查以获得更多帮助： http://api.jquery.com/next/

如何在jQuery中选择特定元素

3 个答案: