兄弟选择器
匹配“prev”元素之后的所有兄弟元素。具有相同的父元素,并匹配过滤“siblings”选择器。
jQuery("prev ~ siblings")
prev:任何有效的选择器
siblings:一个选择器来过滤第一选择器以后的兄弟元素。
(prev + next
)和(prev ~ siblings
)之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素,后者扩展了该达到跟随其的所有同级元素。
例子
查找所有跟在 id 为#prev 的元素后面的所有 div。注意,跟在后面的 span 不会被选中,因为它不是 div 。同时"niece"也不会被选中,因为它是某个兄弟元素的子元素,而不是兄弟元素。
<!DOCTYPE html> <html> <head> <style> div,span { display:block; width:150px; height:80px; margin:5px; background:#bbffaa; float:left; font-size:14px; } div#small { width:60px; height:25px; font-size:12px; background:#fab; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
div(doesn't match since before #prev)
span#prevdiv sibling
div sibling
span sibling(not div)div niece
div sibling