jQuery Find Siblings Elements with Class, id

To get/find and select sibling elements of selected HTML. In this tutorial, you will learn how to find & get the siblings of the next and previous element with class, id, tag name using the jQuery siblings () methods.

In this tutorial, You will learn siblings method uses and how it work siblings() method by example

How to get the siblings of an element in jQuery

jQuery siblings() method is used to find/get the sibling elements of the selected HTML.

Syntax jQuery siblings() Method

$("selector").siblings(filter)

This returns the all the sibling elements.

Parameters

Filter :- The filter is an optional parameter that passes the method to reduce the traversal.

siblings() method By Example

This example will demostrate you how use siblings method to selected html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>siblings() Method Example</title>
<style type="text/css">
    .g_cls{
        background: green;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $("#p_sib").siblings().addClass("g_cls");
});
</script>
</head>
<body>
    <div class="container">
        <h3>Hello World</h3>
        <p id="p_sib">This is paragraph</p>
        <ul>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </div>
</body>
</html>

Output

siblings() Method Example

Hello World

This is paragraph

First
Second
Third

In the above siblings() method example, It can select sibling elements of selected HTML elements and it will change the background color of sibling elements.