jQuery的prev~siblings选择器

一 介绍

prev~siblings选择器用于匹配prev元素之后的所有siblings元素。

其中，prev和siblings是两个相同辈元素。prev~siblings选择器的使用方法如下：

$("prev~siblings");

prev是指任何有效的选择器。

siblings是一个有效选择器并紧接着prev选择器。

例如，要匹配div元素的同辈元素ul，可以使用下面的jQuery代码：

$("div~ul");

 

二 应用

筛选页面中div元素的同辈元素。

 

三 代码

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script><style type="text/css">.background{background:#cef}body{font-size:12px;}</style><div>    <p>第一个p</p>    <p>第二个p</p></div><p>div外面的p</p><script type="text/javascript" charset="GBK">      $(document).ready(function() {            $("div~p").addClass("background");                     //为匹配的元素添加CSS类      });</script>

 

 

四 运行效果

 

 

五 运行说明

在图中可以看到“div外面的p”被添加了背景，而“第一个p”和“第二个p”的段落由于它不是div元素的同辈元素，所以没有被添加背景。