一 介绍
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>
四 运行效果
![](https://i-blog.csdnimg.cn/blog_migrate/956b8bf31c0a80542546485cfaea1c37.png)
五 运行说明
在图中可以看到“div外面的p”被添加了背景,而“第一个p”和“第二个p”的段落由于它不是div元素的同辈元素,所以没有被添加背景。