作者:风nds | 来源:互联网 | 2023-09-25 17:17
实例 查找每个段落的下一个同胞元素,仅选中类名为 “selected” 的段落:
< html> < head> < script type &#61; " text/Javascript" src &#61; " /jquery/jquery.js" > script> head> < body> < p> qipa250 p> < p class &#61; " selected" > Hello 奇葩天地网 p> < div> < span> And www.QiPa250.com span> 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> qipa250 p> < p class &#61; " selected" style &#61;" background : yellow none repeat scroll 0% 0%; " > Hello 奇葩天地网 p> < div> < span> And www.QiPa250.com span> 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 1 li> < li> list item 2 li> < li class &#61; " third-item" > list item 3 li> < li> list item 4 li> < li> list item 5 li> 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 1 li> < li> list item 2 li> < li class &#61; " third-item" > list item 3 li> < li> list item 4 li> < li> list item 5 li> ul> < script> $ ( &#39;li.third-item&#39; ) . next ( ) . css ( &#39;background-color&#39; , &#39;red&#39; ) ; script> body> html>
这次调用的结果是&#xff0c;项目 4 被设置为红色背景。由于我们没有应用选择器表达式&#xff0c;紧跟的这个元素很明确地被包括为对象的一部分。如果我们已经应用了选择器&#xff0c;在包含它之前会检测是否匹配。