查找兄弟元素
向下查找兄弟元素
- next()
- nextAll()
- nextUntil()
向上查找兄弟元素
- prev()
- prevAll()
- prevUntil()
查找所有兄弟元素
- siblings()
1.1.1.next()方法用来查找下一个兄弟元素，可以传参也可以不传参。参数可以是任意jQuery选择器，表示如果下一个元素如果是指定的元素就选定。当没有选中指定的元素时，jQuery链式调用还是保持原来的jQuery对象。
<!-- next --><button>点我</button><span class="demo">duyi-cst</span><p class="demo">duyi-cst</p>
示例：
$(‘button‘).click(function(){ ???$(this).next().css({fontSize:‘20px‘,color:‘orange‘}); ???console.log( $(this).next(‘span‘) );//可以选中元素span ???console.log( $(this).next(‘p‘) );//不能选中元素p，jQuery链式调用还是保持button的jQuery对象});1.1.2nextAll()方法用来查找下面所有兄弟元素，可以传参也可以不传参。参数可以是任意jQuery选择器，表示如果同级后面的元素如果是指定的元素就选定。当没有选中指定元素时，jQuery链式调用还是保持原来的jQuery对象。
<div class="wrapper"> ???全选：<input type="checkbox"></input> ???banana:<input type="checkbox" name=""> ???apple:<input type="checkbox" name=""> ???orange:<input type="checkbox" name=""> ???<input type="submit" value="login" name=""></input></div>
示例：使用nextAll()通过全选按钮获取后面的所有复选框，并实现全选和全部撤销功能
$(‘input[type="checkbox"]‘).eq(0).click(function(){ ???if( $(this).prop(‘checked‘) ){ ???????$(this).nextAll(‘input[type="checkbox"]‘).prop(‘checked‘,true); ???}else{ ???????$(this).nextAll(‘input[type="checkbox"]‘).prop(‘checked‘,false); ???}});1.1.3.nextUntil()方法用来查找下面所有兄弟元素，可以传入两个参数，第一个参数指定结束位置，第二个参数指定选择的元素；参数可以是任意jQuery选择器。
//html代码<div class="wrapper1"> ???<h1>水果</h1> ???????全选：<input type="checkbox"></input> ???????banana:<input type="checkbox"> ???????apple:<input type="checkbox"> ???????orange:<input type="checkbox"> ???<h1>nba</h1> ???????全选：<input type="checkbox"></input> ???????Rose:<input type="checkbox"> ???????Curry:<input type="checkbox"> ???????James:<input type="checkbox"> ???????<input type="button" value="submit"></div>//js代码$(‘.wrapper1 h1‘).next().click(function(){ ???if( $(this).prop(‘checked‘) ){ ???????$(this).nextUntil(‘h1‘,‘input[type="checkbox"]‘).prop(‘checked‘,true); ???}else{ ???????$(this).nextUntil(‘h1‘,‘input[type="checkbox"]‘).prop(‘checked‘,false); ???}});1.2.1.prev()方法用来查找上一个兄弟元素，可以传参也可以不传参。参数可以是任意jQuery选择器，表示如果上一个元素如果是指定的元素就选定。当没有选中指定的元素时，jQuery链式调用还是保持原来的jQuery对象。
<span class="demo">duyi-cst</span><p class="demo">duyi-cst</p><button>点我</button>
示例：
$(this).prev().css({fontSize:‘20px‘,color:‘blu‘});console.log( $(this).prev(‘p‘) );//可以选中元素pconsole.log( $(this).prev(‘span‘) );//不能选中元素p,jQuery链式调用还是保持button的jQuery对象1.2.2.prevAll()方法用来查找上面的所有兄弟元素，可以传参也可以不传参。参数可以是任意的jQuery选择器，表示如果同级前面的兄弟元素如果是被指定的元素就选定。当没有选定指定元素时，jQuery链式调用还是保持原来的jQuery对象。
//htmlbanana:<input type="checkbox" name="">apple:<input type="checkbox" name="">orange:<input type="checkbox" name="">全选：<input type="checkbox"></input>//js$(‘input[type="checkbox"]‘).eq(3).click(function(){ ???if( $(this).prop(‘checked‘) ){ ???????alert(); ???????$(this).prevAll(‘input[type="checkbox"]‘).prop(‘checked‘,true); ???}else{ ???????$(this).prevAll(‘input[type="checkbox"]‘).prop(‘checked‘,false); ???}});1.2.3.prevUntil()方法与nextUntil()方法的机制是一样的，nextUntil向下指定结束查找位置和查找元素，prevUntil向上指定结束查找位置和查找元素。
1.3.1.siblings()方法用来获取所有兄弟元素，也可以传入一个参数(jQuery选择器)作为筛选条件。
//html<ul> ???<li>1</li> ???<li class="a">2</li> ???<li>3</li> ???<li>4</li> ???<li class="a">5</li></ul>//js$(‘ul li‘).eq(2) ???????????.css(‘backgroundColor‘,‘red‘) ???????????????.siblings() ???????????????????.css(‘backgroundColor‘,‘orange‘) ???????????????????????.end() ???????????????????????????.siblings(‘.a‘) ???????????????????????????????.css(‘backgroundColor‘,‘yellow‘);
注：一个关于兄弟元素查找的小demo
//html代码<div class="wrapper2"> ???all:<input type="checkbox"></input> ???<h1>吃货清单</h1> ???all:<input type="checkbox"></input> ???<h2>水果</h2> ???全选：<input type="checkbox"> ???banana:<input type="checkbox"> ???apple:<input type="checkbox"> ???orange:<input type="checkbox"> ???<h2>蔬菜</h2> ???全选：<input type="checkbox"> ???tomato:<input type="checkbox"> ???egg:<input type="checkbox"> ???potao:<input type="checkbox"> ???<h1>明星清单</h1> ???all:<input type="checkbox" name=""> ???<h2>NBA</h2> ???全选：<input type="checkbox"> ???Rose:<input type="checkbox"> ???Curry:<input type="checkbox"> ???James:<input type="checkbox"></div>//js代码//案例实现$(‘.wrapper2 input[type="checkbox"]‘).eq(0).click(function(){ ???if( $(this).prop(‘checked‘) ){ ???????$(this).nextAll().prop(‘checked‘,true); ???}else{ ???????$(this).nextAll().prop(‘checked‘,false); ???}});$(‘.wrapper2 h1‘).next().click(function(){ ???if($(this).prop(‘checked‘)){ ???????$(this).nextUntil(‘h1‘,‘input[type="checkbox"]‘).prop(‘checked‘,true); ???}else{ ???????$(this).nextUntil(‘h1‘,‘input[type="checkbox"]‘).prop(‘checked‘,false); ???}});$(‘.wrapper2 h2‘).next().click(function(){ ???if($(this).prop(‘checked‘)){ ???????$(this).nextUntil(‘h2‘,‘input[type="checkbox"]‘).prop(‘checked‘,true); ???}else{ ???????$(this).nextUntil(‘h2‘,‘input[type="checkbox"]‘).prop(‘checked‘,false); ???} ???});查找父级元素
- parent()
- parents()
- closest()
- offsetParent()
- slice()
2.1.1.parent()--方法用来获取直接父级元素，可以传入参数(jQuery选择器)匹配指定父元素，如果不是指定的则不匹配，返回一个空的jQuery对象。
//div<div class="shop" data-id=‘101‘> ???<p>basketball-nike</p> ???<button>add</button></div>//jsconsole.log( $(‘button‘).parent() );//获取到divconsole.log( $(‘button‘).parent(‘.aaa‘) );//没有获取到，返回空的jQuery对象
2.1.2.parents()--方法用来获取所有祖先元素，也可以传入参数(jQuery选择器)筛选，多个符合筛选条件的都会被匹配到。没有符合条件的，返回空的jQuery对象。
//html同上//jsconsole.log( $(‘button‘).parents() );//div-body-htmlconsole.log( $(‘button‘).parents(‘body‘) );//bodyconsole.log( $(‘button‘).parents(‘.aaa‘) );//没有获取到，返回空的jQuery对象
2.2.1.closest()--方法用来获取符合条件的最近的一个父级元素，并且可以获取本身;不传入参数或参数没有匹配的祖先元素就返回一个空的jQuery对象；
console.log( $(‘.shop button‘).closest() );//空对象console.log( $(‘.shop button‘).closest(‘.shop‘) );//divconsole.log( $(‘.shop button‘).closest(‘button‘) );//自己本省console.log( $(‘.shop button‘).closest(‘.aaa‘) );//空对象
2.2.2.offsetParent()--方法用来获取最近的有设定定位的父级元素。
//html<div class="wrapper" style="position: relative"> ???<div class="box"> ???????<span>123</span> ???</div></div>//jsconsole.log( $(‘.wrapper span‘).offsetParent() );//选取到了<div class="wrapper" style="position: relative"> ???
2.2.3slice()--通过指定索引范围来截取jQuery对象中DOM的部分,索引范围采用左闭右开，第一个索引的元素可以获取，第二个索引的元素不能获取。
//html<ul> ???<li>1</li> ???<li class="a">2</li> ???<li>3</li> ???<li class="a">4</li> ???<li class="a">5</li></ul>//jsconsole.log( $(‘ul li‘).slice(1,4) );//获取到索引为1,2,3的li元素
jQuery使用（四）：DOM操作之查找兄弟元素和父级元素
原文地址：https://www.cnblogs.com/ZheOneAndOnly/p/10332420.html