作者：风nds | 来源：互联网 | 2023-09-25 17:17
实例
查找每个段落的下一个同胞元素&＃xff0c;仅选中类名为 “selected” 的段落&＃xff1a;
<html>
<head><script type&＃61;"text/Javascript" src&＃61;"/jquery/jquery.js">script>
head><body><p>qipa250p><p class&＃61;"selected">Hello 奇葩天地网p><div><span>And www.QiPa250.comspan>div><script>$("p").next(".selected").css("background", "yellow");
script>body>
html>
运行结果&＃xff1a;
查看源码
<html><head><script type&＃61;"text/Javascript" src&＃61;"/jquery/jquery.js">script>
head><body><p>qipa250p><p class&＃61;"selected" style&＃61;"background: yellow none repeat scroll 0% 0%;">Hello 奇葩天地网p><div><span>And www.QiPa250.comspan>div><script>$("p").next(".selected").css("background", "yellow");
script>body>html>
定义和用法
next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器&＃xff0c;则取回匹配该选择器的下一个同胞元素。
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象&＃xff0c;.next() 方法允许我们搜索 DOM 树中的元素紧跟的同胞元素&＃xff0c;并用匹配元素构造新的 jQuery 对象。
该方法接受可选的选择器表达式&＃xff0c;类型与我传递到 $() 函数中的相同。如果紧跟的同胞元素匹配该选择器&＃xff0c;则会留在新构造的 jQuery 对象中&＃xff1b;否则会将之排除。
请思考下面这个带有简单列表的页面&＃xff1a;
<ul><li>list item 1li><li>list item 2li><li class&＃61;"third-item">list item 3li><li>list item 4li><li>list item 5li>
ul>
如果我们从项目三开始&＃xff0c;则能够找到其后出现的元素&＃xff1a;
$(‘li.third-item’).next().css(‘background-color’, ‘red’);
<html>
<head><script type&＃61;"text/Javascript" src&＃61;"/jquery/jquery.js">script>
head><body>
<ul><li>list item 1li><li>list item 2li><li class&＃61;"third-item">list item 3li><li>list item 4li><li>list item 5li>
ul><script>
$(&＃39;li.third-item&＃39;).next().css(&＃39;background-color&＃39;, &＃39;red&＃39;);
script>body>
html>
这次调用的结果是&＃xff0c;项目 4 被设置为红色背景。由于我们没有应用选择器表达式&＃xff0c;紧跟的这个元素很明确地被包括为对象的一部分。如果我们已经应用了选择器&＃xff0c;在包含它之前会检测是否匹配。
京公网安备 11010802041100号