jQuery Find Siblings Elements with Class, id

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.

Recommended jQuery Tutorials

  1. To Find Siblings Elements Using jQuery sibling methods
  2. jQuery | Event MouseUp By Example
  3. Event jQuery Mouseleave By Example
  4. jQuery Event Mouseenter Example
  5. Event jQuery MouseOver & MouseOut By Example
  6. keyup jquery event example
  7. Jquery Click Event Method with E.g.
  8. Event jQuery. Blur By Example
  9. jQuery form submit event with example
  10. keydown function jQuery
  11. List of jQuery Events Handling Methods with examples
  12. Jquery Selector by .class | name | #id | Elements
  13. How to Get the Current Page URL in jQuery
  14. jQuery Ajax Get() Method Example
  15. get radio button checked value jquery by id, name, class
  16. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  17. jQuery Get Data Text, Id, Attribute Value By Example
  18. Set data attribute value jquery
  19. select multiple class in jquery
  20. How to Remove Attribute Of Html Elements In jQuery
  21. How to Checked Unchecked Checkbox Using jQuery
  22. jQuery removeClass & addClass On Button Click By E.g.
  23. To Remove whitespace From String using jQuery
  24. jQuery Ajax Post Method Example
  25. jQuery Ajax Get Method Example
  26. To Load/Render html Page in div Using jQuery Ajax $.load

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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