jQuery选择器之层次选择器用法实例分析

当#one元素之后存在兄弟span元素，但span元素均与#one元素不相邻时，写法3、写法4和写法5可以查询到结果，写法1和写法2查询不到结果。
当#one元素之后存在相邻的兄弟span元素时，写法1、写法2、写法3、写法4和写法5查询到的结果相同。

4、兄弟元素选择器

选择器：prev ~ siblings
描述：匹配 prev 元素之后的所有siblings兄弟元素。
返回值：元素集合

示例：

<script type="text/javascript">
  $(document).ready(function(){
    //【写法1】写法1与写法2等价
    $("#two ~ div").css("border","1px solid #ffbbaa");
    $(".mini:eq(1) ~ div").css("border","1px solid #ffbbaa");
    //【写法2】
    $("#two").nextAll("div").css("border","1px solid #ffbbaa");
    $(".mini:eq(1)").nextAll("div").css("border","1px solid #ffbbaa");
  });
</script>

5、prev()和prevAll()

筛选方法：prev()
描述：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
返回值：元素集合

示例：

<script type="text/javascript">
  $(document).ready(function(){
    //【写法1】
    $("span:first").prev(".bbb").css("background", "#ffbbaa");
    //【写法2】写法2、写法3和写法4等价
    $("span:first).prevAll(".bbb:first").css("background", "#ffbbaa");
    //【写法3】
    $("span:first).prevAll(".bbb:eq(0)").css("background", "#ffbbaa");
    //【写法4】
    $("span:first).prevAll(".bbb").eq(0).css("background", "#ffbbaa");
  });
</script>

当span:first元素之前存在兄弟.bbb元素，但.bbb元素均与span:first元素不相邻时，写法2、写法3和写法4可以查询到结果，写法1查询不到结果。
当span:first元素之前存在相邻的兄弟.bbb元素时，写法1、写法2、写法3和写法4查询到的结果相同。

筛选方法：prevAll()
描述：查找当前元素之前所有的同辈元素。
返回值：元素集合

示例：

<script type="text/javascript">
  $(document).ready(function(){
    $("#two").prevAll("div").css("background", "#ffbbaa");
  });
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。