<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>14.3jQuery遍历同胞节点方法</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1.prev()
$('#btn1').click(function(){
$('#d').prev().css('color','red');
});
//2.next()
$('#btn2').click(function(){
$('#d').next().css('color','green');
});
//3.prevAll()
$('#btn3').click(function(){
$('#d').prevAll().css('background-color','#FF6');
});
//4.nextAll()
$('#btn4').click(function(){
$('#d').nextAll().css('background-color','#FCF');
});
//5.prevUntil()
$('#btn5').click(function(){
//prevUntil():没有参数，向上查找所有同胞节点
$('#d').prevUntil().css('border','solid 2px blue');
//prevUntil(参数):有表达式，向上查到指定同胞节点
$('#d').prevUntil(':contains("A")').css('text-align','center');
});
//6.nextUntil()
$('#btn6').click(function(){
//nextUntil():没有参数，向下查找所有同胞节点
$('#d').nextUntil().css('border','solid 2px red');
//nextUntil(参数):有表达式，向下查找到指定同胞节点
$('#d').nextUntil(':contains("G")').css('text-align','center');
});
//7.siblings()
$('#btn7').click(function(){
//siblings()：无参数，返回所有同胞节点
$('#d').css({'background-color':'#CCC','border':'#000 solid 2px'})
.siblings().css('margin','2px');
//sibling(参数):有参数，返回符合参数规则的同胞节点
$('#d').siblings('.one').css('list-style','square');
$('#d').siblings('.three').css('list-style','circle');
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="prev():向上查找第一个同胞节点" ><br>
<input type="button" id="btn2" value="next():向下查找第一个同胞节点" ><br>
<input type="button" id="btn3" value="prevAll():向上查找所有同胞节点" ><br>
<input type="button" id="btn4" value="nextAll():向下查找所有同胞节点" ><br>
<input type="button" id="btn5" value="prevUntil():向上查找到指定同胞节点" ><br>
<input type="button" id="btn6" value="nextUntil():向下查找到指定同胞节点" ><br>
<input type="button" id="btn7" value="siblings():返回所有同胞节点" ><br>
<ul>
<li class="one">A</li>
<li class="one">B</li>
<li class="two">C</li>
<li id="d">D</li>
<li class="two">E</li>
<li class="three">F</li>
<li class="three">G</li>
</ul>
</body>
</html>
效果图
