element ~ siblings Selector - Javascript jQuery Selector

Javascript examples for jQuery Selector:element siblings

  1. HOME
  2. Javascript
  3. jQuery Selector
  4. element siblings

Description

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

Syntax

Parameter Description
element Required. Any valid jQuery selector
siblings Required. siblings of the element parameter

The following code shows how to select all <p> elements that are siblings of the <div> element:

Demo Code

ResultView the demo in separate window 

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

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


<h2>What will $("div ~ p") select?</h2>

<p>This is a p element (will not be selected).</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>

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


<div style="border:1px solid black;padding:10px;">
<p>This is a p element inside a div element (will not be selected).</p></div>

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

</body>
</html>

Related Tutorials