实例

检索每个段落，找到类名为 "selected" 的前一个同胞元素：

$("p").prev(".selected")

亲自试一试

定义和用法

prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。

.prev(selector)

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.prev() 方法允许我们在 DOM 树中搜索这些元素的前一个同胞元素，并用匹配元素构造一个新的 jQuery 对象。

该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。

请思考这个带有基本的嵌套列表的页面：

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

如果我们从第三个项目开始，则可找到该元素之间的紧邻元素：

$('li.third-item').prev().css('background-color', 'red');

亲自试一试

此处调用的结果是将项目 2 设置为红色背景。由于我们未应用选择器表达式，前一个元素很自然地成为了对象的一部分。如果已应用选择器，则会在包含元素之前，检测元素是否匹配选择器。

实例

查找每个段落的下一个同胞元素，仅选中类名为 "selected" 的段落：

$("p").next(".selected").css("background", "yellow");

亲自试一试

定义和用法

next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。

语法

.next(selector)

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.next() 方法允许我们搜索 DOM 树中的元素紧跟的同胞元素，并用匹配元素构造新的 jQuery 对象。

该方法接受可选的选择器表达式，类型与我传递到 $() 函数中的相同。如果紧跟的同胞元素匹配该选择器，则会留在新构造的 jQuery 对象中；否则会将之排除。

请思考下面这个带有简单列表的页面：

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

如果我们从项目三开始，则能够找到其后出现的元素：

$('li.third-item').next().css('background-color', 'red');

亲自试一试

这次调用的结果是，项目 4 被设置为红色背景。由于我们没有应用选择器表达式，紧跟的这个元素很明确地被包括为对象的一部分。如果我们已经应用了选择器，在包含它之前会检测是否匹配。

实例

查找第一个 div 之后的所有类名，并为他们添加类名：

$("div:first").nextAll().addClass("after");

亲自试一试

定义和用法

nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素，由选择器筛选是可选的。

语法

.nextAll(selector)

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.nextAll() 方法允许我们搜索 DOM 树中的元素跟随的同胞元素，并用匹配元素构造新的 jQuery 对象。

该方法接受可选的选择器表达式，类型与我传递到 $() 函数中的相同。如果应用选择器，则将通过检测元素是否匹配来对它们进行筛选。

请思考下面这个带有简单列表的页面：

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

如果我们从项目三开始，那么我们能够找到其后出现的元素：

$('li.third-item').nextAll().css('background-color', 'red');

亲自试一试

这次调用的结果是，项目 4 和 5 被设置为红色背景。由于我们没有应用选择器表达式，紧跟的这个元素很明确地被包括为对象的一部分。如果我们已经应用了选择器，在包含它之前会检测是否匹配。

实例

定位最后一个 div 之前的所有 div，并为它们添加类：

$("div:last").prevAll().addClass("before");

亲自试一试

定义和用法

prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素，使用选择器进行筛选是可选的。

语法

.prevAll(selector)

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.prevAll() 方法允许我们在 DOM 树中搜索这些元素前面的同胞元素，并用匹配元素构造一个新的 jQuery 对象。

该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。

请思考这个带有基本的嵌套列表的页面：

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

如果我们从第三个项目开始，则可找到该元素之间的同胞元素：

$('li.third-item').prevAll().css('background-color', 'red');

亲自试一试

此处调用的结果是将项目 2 和项目 1 设置为红色背景。由于我们未应用选择器表达式，这些前面的元素很自然地成为了对象的一部分。如果已应用选择器，则会在包含元素之前，检测这些元素是否匹配选择器。

实例

查找每个 p 元素的所有类名为 "selected" 的所有同胞元素：

$("p").siblings(".selected")

亲自试一试

定义和用法

siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。

语法

.siblings(selector)

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.siblings() 方法允许我们在 DOM 树中搜索这些元素的同胞元素，并用匹配元素构造一个新的 jQuery 对象。

该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。

请思考这个带有基本的嵌套列表的页面：

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

如果我们从第三个项目开始，则可找到该元素的同胞元素：

$('li.third-item').siblings().css('background-color', 'red');

亲自试一试

此处调用的结果是将项目 1、2、4 和 5 的背景设置为红色。 设置为红色背景。由于我们未应用选择器表达式，所有同胞元素很自然地成为了对象的一部分。如果已应用选择器，则只会包含四个列表中的匹配的项目。

原始元素不包含在同胞元素中，当我们打算找到 DOM 树的特定层级上的所有元素时，记住一点很重要。