jquery中获取兄弟元素的方法_jquery选择器指定class名称的兄弟元素-优快云博客

本文介绍如何使用jQuery选择器高效地选取网页中的DOM元素，包括直接兄弟元素、所有后续兄弟元素等，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果要获取下例中所有的 h1的直接兄弟元素h2：

<div>
<h1>Main title</h1>
<h2>Section title</h2>
<p>Some content...</p>
<h2>Section title</h2>
<p>More content...</p>
</div>

可以直接使用

$('h1 + h2')
// Select ALL h2 elements that are adjacent siblings of H1 elements.

例如：

 $('h1 + h2').css({"color":"red"});

如果要过滤h1的兄弟元素，当然也可以使用

$('h1').siblings('h2,h3,p');
// Select all H2, H3, and P elements that are siblings of H1 elements.

$('h1').siblings('h2,h3,p').css({"background":"blue"});

如果要获取当前元素之后的所有兄弟元素，可以使用nextAll()

例如，针对下面的html代码

<ul>
<li>First item</li>
<li class="selected">Second Item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ul>

如果要获取第二个条目之后的所有li元素，可以使用如下代码

$('li.selected').nextAll('li');

例如：

$('li.selected').nextAll('li').css({"color":"pink"});

上例也可以使用general sibling combinator (~)来实现

$('li.selected ~ li');

获取直接兄弟元素也可以不使用selector，直接使用next()．

var topHeaders = $('h1');

topHeaders.next('h2').css('color', 'white');