Open In App

jQuery | Traversing

Last Updated : 16 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

In jQuery, traversing means moving through or over the HTML elements to find, filter or select a particular or entire element.
Based on the traversing purposes following methods are Categorized as follows:

Tree Traversing:

Ancestors:

  • parent()
    it gives parent element of specified selector
    Syntax:

    $(selector).parent();
  • parents()
    it gives all ancestor elements of the specified selector.
    Syntax:

    $(selector).parents();
  • parentsUntil()
    it gives all ancestor elements between specified selector and arguments.
    Syntax:

    $(selector).parentsUntil(selector, filter element)
    
    $(selector).parentsUntil(element, filter element)
    
  • offsetParent()
    it gives the first positioned parent element of specified selector.
    Syntax:

    $(selector).offsetParent();
  • closest()
    it gives the first ancestor of the specified selector.
    Syntax:

    $(selector).closest(selector);
    $(selector).closest(selector, context);
    $(selector).closest(selection);
    $(selector).closest(element);

Descendants:

  • children()
    it gives the children of each selected elements, optionally filtered by a selector.
    Syntax:

    $(selector).children();
    
  • find()
    it gives descendant elements of specified elements, filtered by a selector, jQuery object, or element.
    Syntax:

    $(selector).find('selector to find');

Siblings:

  • siblings()
    it gives all siblings of the specified selector.
    Syntax:

    $(selector).siblings();
  • next()
    it gives the next sibling element of the specified selector.
    Syntax:

    $(selector).next();
    
  • nextAll()
    it gives all next sibling elements of the specified selector.
    Syntax:

    $(selector).nextAll();
    
  • nextUntil()
    it gives all next sibling elements between specified selector and arguments.
    Syntax:

    $(selector).nextUntil();
    
  • prev()
    it gives the previous sibling element of the specified selector.
    Syntax:

    $(selector).prev(selector);
    
    $(selector).prev()
    
  • prevAll()
    it gives all previous sibling elements of the specified selector.
    Syntax:

    $(selector).prevAll(selector, filter element)
    
    $(selector).prevAll(element, filter element)
    
  • prevUntil()
    it gives all previous sibling elements between specified selector and arguments.
    Syntax:

    $(selector).prevUntil(selector, filter element)
    
    $(selector).prevUntil(element, filter element)
    

Filtering

  • first()
    it gives the first element of the specified selector.
    Syntax:

    $(selector).first();
    
  • last()
    it gives the last element of the specified selector.
    Syntax:

    $(selector).last();
    
  • eq()
    it gives an element with a specific index number of the specified selector.
    Syntax:

    $(selector).eq(index);
    
    $(selector).eq( indexFromEnd );
    
  • filter()
    it remove/detect an elements that are matched with specified selector.
    Syntax:

    $(selector).filter(selector)
    $(selector).filter(function)
    $(selector).filter(selection)
    $(selector).filter(elements)
  • has()
    it gives all elements that have one or more elements within, that are matched with specified selector.
    Syntax:

    $(selector).has(selector);
    
  • is()
    it checks if one of the specified selector is matched with arguments.
    Syntax:

    .is( selector )
    .is( function )
    .is( selection )
    .is( elements )
  • map()
    Pass each element in the current matched set through a function, producing a new jQuery object containing the return values
    Syntax:

    .map( callback )
  • slice()
    it selects a subset of specified selector based on its argument index or by start and stop value.
    Syntax:

    $(selector).slice(start, end );
    
    $(selector).slice(start);
    

Miscellaneous Traversing

  • add()
    it add all elements to set of matched elements to manipulate them at the same time.
    Syntax:

    $(selector).add(selector to add);
  • addBack()
    it add the previous set of elements on the stack to the current set, optionally filtered by a selector.
    Syntax:

    $(selector).addBack();
  • andSelf()
    Deprecated 1.8 which is alias of addBack().
    Syntax:

    $(selector).addSelf();
  • contents()
    it gives all direct children, including text and comment nodes, of the specified selector.
    Syntax:

    $(selector).contents();
  • not()
    it gives all elements that do not match with specified selector.
    Syntax:

    $(selector).not(selector);
  • end()
    it is most recent filtering operation in the current chain and return the set of matched elements to its previous state and it doesn’t accept any arguments.
    Syntax:

    $(selector).each(callback function);
    

Collection Manipulation

  • each()
    it iterates over the DOM elements and execute call back function

Example 1:




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .siblings * {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src=
  </script>
    <script>
        $(document).ready(function() {
            $("h2").siblings().css({
                "color": "red",
                "border": "2px solid red"
            });
            $("h2").parent().css({
                "color": "green",
                "border": "2px solid blue"
            });
            $("p").first().css(
              "background-color", "yellow");
            $("p").has("span").css(
              "background-color", "indigo");
  
        });
    </script>
</head>
  
<body class="siblings">
  
    <div>GeeksforGeeks (parent)
        <p>GeeksforGeeks</p>
        <p><span>GeeksforGeeks</span></p>
        <h2>GeeksforGeeks</h2>
        <h3>GeeksforGeeks</h3>
        <p>GeeksforGeeks</p>
    </div>
  
</body>
  
</html>


Output:

Example 2:




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: grey;
            margin: 10px;
            padding: 10px;
        }
          
        form {
            margin: 10px;
            padding: 10px;
        }
          
        #article b {
            color: blue;
            font-weight: bold;
        }
          
        label {
            color: green;
            font-weight: bold;
        }
    </style>
    <script src=
    </script>
</head>
  
<body>
  
    <p><em>Hello</em>GeeksforGeeks</p>
    <p id="article"><b>Article Info: </b></p>
    <form>
        <label>Article Title:</label>
        <input type="text"
               name="article" 
               value="jQuery | 
                     Traversing Example 2" />
        <br>
        <br>
        <label>Author:</label>
        <input type="text"
               name="author"
               value="Vignesh" />
        <br>
        <br>
        <label>Author's Email id:</label>
        <input type="text"
               name="author" 
               value="vignesh@gmail.com" />
        <br>
        <br>
        <label>Website:</label>
        <input type="text" 
               name="url"
               value="https://www.geeksforgeeks.org/" />
        <br>
        <br>
    </form>
  
    <script>
        $("#article")
            .append($("input").map(function() {
                    return $(this).val();
                })
                .get()
                .join(", "));
    </script>
    <script>
        $("p")
            .find("em")
            .end()
            .css("border", "2px red solid");
    </script>
  
</body>
  
</html>


Output



Previous Article
Next Article

Similar Reads

jQuery | Traversing Filtering
The traversing filtering in jQuery is used to find HTML elements based on their relation to the other elements. Filtering is the process in jQuery which is used to allow to find a particular element with some condition or without condition. There is five basic type of filtering method that can be used to select an element which is listed below: fir
4 min read
jQuery | Traversing Descendants
Using jQuery we can traverse down the DOM tree in search of descendants of an element. A descendant is a child, grandchild, great-grandchild and so on. Traversing Down the DOM Tree: jQuery methods for traversing down the DOM tree are. children() find() jQuery children() Method The children() method returns all direct children of selected element. T
1 min read
jQuery | Traversing Ancestors
It is used to find ancestors of an element in the DOM tree. There are different Methods for traversing up the DOM tree : parent(): It is used to return the direct parent element of the given selected element. parents(): It is used to return all ancestor elements of the given selected element upto root element. parentsUntil(): It is used to return a
2 min read
jQuery | Traversing Siblings
We can traverse the sideways in the Dom tree with the help of jQuery and find the siblings of an element. The sibling elements share the same parent. Traversing Sideways: jQuery methods to traverse the sideways in dom tree. siblings() next() &amp; nextAll() nextUntill() prev() &amp; prevAll() prevUntil() siblings(): The siblings() is an inbuilt met
2 min read
jQuery Traversing Complete Reference
In jQuery, traversing means moving through or over the HTML elements to find, filter, or select a particular or entire element. Syntax: $(selector).method() Example: This example illustrates the offsetParent() method in jQuery. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;The offsetParent Method&lt;/title&gt; &lt;script s
3 min read
What do you mean by jQuery traversing ?
jQuery traversing means moving through the linked elements in an HTML page. Using jQuery traversing, we can search and find different elements based on the relation of the elements. The elements can be parents, siblings, children, etc. We can move up (ancestors), down (descendants), and sideways (siblings). We can see a DOM in the following diagram
9 min read
jQuery Cheat Sheet – A Basic Guide to jQuery
What is jQuery?jQuery is an open-source, feature-rich JavaScript library, designed to simplify the HTML document traversal and manipulation, event handling, animation, and Ajax with an easy-to-use API that supports the multiple browsers. It makes the easy interaction between the HTML &amp; CSS document, Document Object Model (DOM), and JavaScript.
34 min read
jQuery jQuery.fx.interval Property with example
The jQuery.fx.interval property in jQuery is used to modify the number of frames per second at which animations will run and to change the animation firing rate in milliseconds. Its default value is 13ms. Syntax: jQuery.fx.interval = milliseconds;Parameters: This method accepts single parameter milliseconds which is mandatory. It is used to specify
2 min read
jQuery jQuery.fx.off Property
The jQuery.fx.off property in jQuery is used to globally disable/enable all animations. Its default value is false which is used to allow animation to run normally. Syntax: jQuery.fx.off = true|false;Parameter: This event accepts two parameters as mentioned above and described below: true: It is used to specify that the animations should be disable
2 min read
jQuery jQuery.support Property
The jQuery.support property in jQuery contains a collection of properties that are used to represent the different browser features or bugs. Syntax: jQuery.support.propvalueParameters: This property contains a single parameter propvalue: which is required. It is used to specify the function to test for. The tests included are: ajaxboxModelchangeBub
1 min read