jQuery Find Siblings Elements

jQuery Find Siblings Elements

How to get,find and select sibling element of selected HTML elements. Using the jQuery siblings () methods, You can get,find and select sibling elements of selected HTML elements.

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

jQuery siblings() Method

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

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 background color of sibling elements.

Leave a Reply

Your email address will not be published. Required fields are marked *