jQuery siblings() with Examples

jQuery Web Development Front End Technology

The siblings() method in jQuery is used to return all sibling elements of the selected element.

Syntax

The syntax is as follows −

$(selector).siblings(filter)

Above, the filter specifies a selector expression to narrow down the search for sibling elements.

Let us now see an example to implement the jQuery siblings() method −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   width:600px;
}
.demo * {
   display: block;
   background-color;
   border: 2px solid yellow;
   color: blue;
   padding: 10px;
   margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("li.test").siblings().css({"background-color": "orange","color": "white", "border": "3px dashed blue"});
   });
</script>
</head>
<body>
<h2>Demo Heading</h2>
<div class="demo">
<ul>ul (parent)
<li>previous sibling</li>
<li>previous sibling</li>
<li>previous sibling</li>
<li class="test">li (sibling)</li>
<li>next sibling</li>
<li>next sibling</li>
<li>next sibling</li>
</ul>
</div>
</body>
</html>