<!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head> <body> <div class="clsFraA">Left</div> <div class="clsFraA" id="divMid"> <div id="num1">1</div> <div>2<span>haha</span></div> <span><span class="clsFraC" id="Span2">Span</span></span> </div> <div class="clsFraA">Right_1</div> <div class="clsFraA">Right_2</div> </body> </html>
$(function (){ //jQuery代码 $("#divMid").next().css("display","none") //针对于同级的div;Right_1所在div被隐藏； 等价于=$("#divMid + div").css("display","none"); $("#divMid span").css("display","none"); //针对div里面的所有的span标签隐藏；（Span，haha文字全部隐藏） $("#divMid>span").css("display","none");//针对div里面的子元素span标签隐藏；（Span文字隐藏）
$("#divMid ~ div").css("display","none"); //针对div的同级元素后面的div标签隐藏；（Right_1，Right_2文字隐藏）
等价于= $("#divMid").nextAll().css("display","none");
$("#divMid").siblings("div").css("display","none"); //针对div的同级元素相邻的div标签隐藏；（Left，Right_1，Right_2文字隐藏）
});
原文：http://www.cnblogs.com/dazhangli/p/5367036.html