JQuery Sibling Functions

The previous two articles explained how to retrieve the parent or child elements of another element using JQuery. This article focuses on selecting the sibling of any html element. Siblings are the element that exist on the same level with some specif element. They are neither parent nor child of the element. There are seven JQuery sibling functions: siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil(). Take a look at the following examples.

The siblings(), next(), nextAll(), nextUntil() methods

The sibling() function retrieves all the next and previous siblings of an element where as the next() function retrieves only the next sibling. Similarly nextAll() selects all the next siblings. Finally, the nextUntil() retrieves all the next siblings until a specific element is selected. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Sibling</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("h3").siblings().css({"border": "1px solid yellow"});
         $("p").next().css({"border": "1px solid green"});
         $("h1").nextAll().css({"border": "1px solid red"});
  
         });
      </script>
    
</head>
    
<body>
    
    <div>
        <div> 
        <h2>abcd</h2>
            <h3>abcd</h3>
            <h4>Abcd</h4>
        
        </div>
        <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Orange</li>
            <li>Guava</li>
            <li><h1>Peach </h1></li>
        
        </u>
        <p>This is the paragraph selected.</p>
        <h1>This is the next sibling</h1>
        <a> This is another sibling</a>
        <p>This is the last sibling.</p>
    </div>

</body>

</html>

Download Code Run Code

The above contains multiple elements at the same element. JQuery siblings() function retrieves all the siblings h3 heading and add a yello border to it. As a result the h2 and h4 headings will have yellow borders. Similarly, the next() function retrieves the next siblings of the paragraph element. This changes adds green border to h1 since it is the next sibling of paragraph. Finally, a red border is added to all next siblings of h1 using the next() function. This adds red border to anchor and paragraph tags.

The prev(), prevAll(), prevUntil methods

These are the JQuery sibling functions respectively select the previous, all the previous and all the previous until a specific element is found. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Previous</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("h4").prevAll().css({"border": "1px solid yellow"});
         $("p").prev().css({"border": "1px solid green"});
  
         });
      </script>
    
</head>
    
<body>
    
    <div>
    
        <h1>This is the next sibling</h1>
        <a> This is another sibling</a>
        <p>This is the last sibling.</p>

        
            <div> 
        <h2>abcd</h2>
            <h3>abcd</h3>
            <h4>Abcd</h4>
        
        </div>
        <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Orange</li>
            <li>Guava</li>
            <li><h1>Peach </h1></li>
        
        </u>
      
    </div>

</body>

</html>

Download Code Run Code

The above page contains an h4 tag. The JQuery prevAll() function selects this element and adds yellow border to all of its previous siblings i.e. h3 and h4 tags. Similarly, prev() function selects the previous sibling of paragraph i.e. anchor element and adds a green border to it.

<<< JQuery Descendant TraversingJQuery Filtering Functions >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .