Home >>jQuery Tutorial >jQuery siblings() Method

jQuery siblings() Method

jQuery siblings() Method

jQuery siblings() method in jQuery is used to returns all sibling elements (share the same parent) of the selected element.

Syntax:
$(selector).siblings(filter)

Parameter Values

Parameter Description
filter It is an Optional parameter and is used to specifies a selector expression to narrow down the search for sibling elements
Here is an Example of jQuery siblings() Method:

<html>
<head>
<style>
.siblings * { 
display: block;
border: 2px solid #cfe2fc;
color: #cfe2fc;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li.start").siblings().css({"color": "red", "border": "2px solid #3e88f0"});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (parent)  
<li>li (the previous sibling of "start")</li>
<li>li (the previous sibling of "start")</li>
<li class="start">li (sibling)</li>
<li>li (the next sibling of "start")</li>
<li>li (the next sibling of "start")</li>
</ul>   
</div>
</body>
</html>

Output:
    ul (parent)
  • li (the previous sibling of "start")
  • li (the previous sibling of "start")
  • li (sibling)
  • li (the next sibling of "start")
  • li (the next sibling of "start")