当前位置：首页 > jquery

jquery 兄弟

2026-01-16 14:37:43jquery

jQuery 兄弟元素选择器

在jQuery中，选择兄弟元素可以通过多种方法实现。兄弟元素指的是与当前元素具有相同父元素的元素。

使用 `siblings()` 方法

siblings() 方法选择当前元素的所有兄弟元素，不包括元素本身。可以通过选择器进一步筛选。

$('#target').siblings(); // 选择所有兄弟元素
$('#target').siblings('.class-name'); // 选择具有特定class的兄弟元素

使用 `next()` 和 `prev()` 方法

next() 方法选择当前元素的下一个兄弟元素，prev() 方法选择当前元素的上一个兄弟元素。

$('#target').next(); // 选择下一个兄弟元素
$('#target').next('.class-name'); // 选择下一个具有特定class的兄弟元素
$('#target').prev(); // 选择上一个兄弟元素
$('#target').prev('.class-name'); // 选择上一个具有特定class的兄弟元素

使用 `nextAll()` 和 `prevAll()` 方法

nextAll() 方法选择当前元素之后的所有兄弟元素，prevAll() 方法选择当前元素之前的所有兄弟元素。

$('#target').nextAll(); // 选择之后的所有兄弟元素
$('#target').prevAll(); // 选择之前的所有兄弟元素

使用 `nextUntil()` 和 `prevUntil()` 方法

nextUntil() 方法选择当前元素之后直到匹配选择器的元素之间的所有兄弟元素，prevUntil() 方法选择当前元素之前直到匹配选择器的元素之间的所有兄弟元素。

$('#target').nextUntil('.stop'); // 选择之后直到class为stop的元素之间的所有兄弟元素
$('#target').prevUntil('.stop'); // 选择之前直到class为stop的元素之间的所有兄弟元素

示例代码

假设有以下HTML结构：

<ul>
  <li>Item 1</li>
  <li id="target">Item 2</li>
  <li class="highlight">Item 3</li>
  <li>Item 4</li>
</ul>

选择兄弟元素的jQuery代码示例：

jquery 兄弟

// 选择所有兄弟元素
$('#target').siblings().css('color', 'red');

// 选择下一个兄弟元素
$('#target').next().css('font-weight', 'bold');

// 选择上一个兄弟元素
$('#target').prev().css('text-decoration', 'underline');

// 选择之后的所有兄弟元素
$('#target').nextAll().css('background-color', 'yellow');

// 选择之前的所有兄弟元素
$('#target').prevAll().css('background-color', 'lightgray');

// 选择之后直到class为highlight的元素之间的所有兄弟元素
$('#target').nextUntil('.highlight').css('border', '1px solid black');

通过这些方法，可以灵活地选择和操作兄弟元素。