下一个同辈选择器 Selector (“prev ~ siblings”)
next siblings selector
描述：选择跟在“prev” 元素后面的所有同辈元素。具有相同的父元素，并匹配筛选的“siblings”选择器。
加入于: 1.0
jQuery( "prev ~ siblings" )prev: 任何有效的选择器。
siblings: 一个选择器，用来筛选第一个选择器匹配的元素的面跟着的同辈元素。
prev + next和prev ~ siblings的显著区别是它们各自的接触。前者只接触到一个后面紧跟着的同辈元素，与此同时，后者会扩展到接触所有的所有后面跟着的同辈元素。
示例
找到带有id为#prev的元素后面所有的div同辈元素。注意，<span>不能选中，因为它不是一个div，而且"niece"也不能选中，因为它是一个同辈元素的子元素，不是真正的同辈元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>next siblings demo</title>
<style>
div, span {
display: block;
width: 80px;
height: 80px;
margin: 5px;
background: #bfa;
float: left;
font-size: 14px;
}
div#small {
width: 60px;
height: 25px;
font-size: 12px;
background: #fab;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
<script>
$( "#prev ~ div" ).css( "border", "3px groove blue" );
</script>
</body>
</html>
演示结果