jQuery Find Sibling with id, Class

jQuery find sibling element with id class; Through this tutorial, i am going to show you how to find get,find and select sibling element from selected HTML element using the jQuery siblings () method.

jQuery Find Sibling Element by Id, Class

  • jQuery siblings() Method
  • Syntax jQuery siblings() Method
  • Parameters of jQuery siblings() Method
  • Example of jQuery get sibling element by id and add class

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 of jQuery siblings() Method

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

Example of jQuery get sibling element by id and add class

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>                            

Demo for jQuery get sibling element by id and add class

siblings() Method Example

Hello World

This is paragraph

  • First
  • Second
  • Third

Recommended jQuery Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published.