How to select all sibling elements of an element using jQuery ? Last Updated : 02 Jun, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will discuss how to select all sibling elements of an element using jQuery. To select all sibling elements of an element, we will use the siblings() method. The siblings() method is used to find all sibling elements of the selected element. The siblings are those having the same parent element in DOM Tree. Syntax: $(selector).siblings(function) This function accepts an optional parameter “function” that is going to select all siblings of the selected elements. It returns all the siblings of the selected element. Approach: First, we will create the main div container, and inside the main container, we will add two div containers. When the user clicks on the button, the siblings() method is called and it selects the siblings of the section1 class container. After selecting the siblings, we add some CSS properties to them. Example: In this example, we will use the above approach. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src= "https://code.jquery.com/jquery-3.5.1.min.js"> </script> <title> How to select all sibling elements of an element using jQuery? </title> <style> .main { width: 450px; text-align: justify; font-size: 18px; } #GFG { padding: 5px 15px; margin-top: 20px; } .Geeks { font-size: 18px; font-weight: bold; color: green; } </style> <script> $(document).ready(function () { $("#GFG").on('click', function () { $(".section1").siblings().addClass("Geeks"); }); }); </script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> How to select all sibling elements of an element using jQuery? </h3> <div class="main"> <div class="section1"> HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is the combination of Hypertext and Markup language. </div> <div class="section2"> Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages. </div> </div> <input type="button" id="GFG" value="Remove Contents"> </center> </body> </html> Output: Comment More infoAdvertise with us Next Article How to select all next sibling elements of an element using jQuery ? V vkash8574 Follow Improve Article Tags : HTML jQuery-Methods jQuery-Questions Similar Reads How to select all next sibling elements of an element using jQuery ? In this article, we will discuss how to select all the next sibling elements of an element using jQuery. To select all the next sibling elements of an element, we will use nextAll() method. The nextAll() method is used to find the next sibling elements of the selected element. The siblings are those 2 min read How to Select a Range of Elements using jQuery ? Given an HTML document with a range of similar elements and the task is to select a range of those elements with the help of JavaScript. There are two approaches that are discussed below with an example. Approach 1: First, select all elements of class = 'child' by jQuery selector then use slice() me 2 min read How to select all ancestors of an element in jQuery ? In this article, we will select all the ancestor elements of an element in jQuery. To select all ancestor elements of an element, the parents() method is used. This method is used to find all the parent elements related to the selected element. This method traverses all the levels up the selected el 1 min read How to select specific ancestors of an element in jQuery ? In this article, we will select specific ancestor elements of an element in jQuery. To select the specific ancestor elements of an element, we use the parents() method. This method is used to find the parent elements related to the selected element. This parent () method traverse all the levels up t 1 min read How to select direct parent element of an element in jQuery ? In this article, we will select the direct parent element of an element using jQuery. To select the direct parent element, the parent() method is used. This method finds the parent element related to the selected element. This parent() method traverses a single level up the selected element and retu 1 min read How to select multiple elements using jQuery ? In this article, we will learn how to select multiple elements using JQuery. JQuery is the fastest and most lightweight JavaScript library that is used to simplify the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. JQuery is widely famou 2 min read Like