jQuery Selector element ~ siblings

Introduction

The ("element ~ siblings") selector selects all elements that are siblings of the specified "element".

$("div ~ p") - selects all <p> elements that are siblings of the <div> element.

Both of the specified elements must share the same parent. 

("element ~  siblings")
Parameter OptionalDescription
element Required.Any valid jQuery selector
siblings Required. the siblings of the element parameter

Select all <p> elements that are siblings of the <div> element: 

$("div ~ p")

View in separate window 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("div ~ p").css("background-color", "yellow");
});/* w  w  w . ja  v  a2 s.c o m*/
</script>
</head>
<body>

<p>This is a p element.</p>
<div style="border:1px solid black;padding:10px;">This is a div element.</div>
<p>This is a p element.</p>
<p>This is another p element.</p>

<div style="border:1px solid black;padding:10px;">
<p>This is a p element inside a div element.</p></div>

<h2>This is a heading</h2>
<p>This is a p element.</p>

</body>
</html>



PreviousNext

Related