jQuery Introduction | Traversing Elements | Other Traversal Methods .add() .each() .end() .offsetParent()

Tags:

Other Traversal Methods

Other methods used to traverse elements in the DOM tree are as follows.

Method Description
.add() Adds other elements to the current selection.
.addBack() Adds the previously selected elements to the current set of selected elements.
.each() Runs the callback function passed to it for each selected element.
.end() Restores the set of selected elements to the state before the last executed method.
.offsetParent() Finds and selects the closest positioned element among the parent elements in the DOM tree.
.contents() Selects all child elements of the selected element, including text nodes and comment nodes.

.add() Method

The .add() method additionally selects other elements together with the selected elements.

When HTML elements exist as follows:

<p>Hello.</p>
<span>This is devkuma.</span>
<div>Nice to meet you.</div>

The following example finds and selects the <p> element, additionally selects the <div> element, and sets the CSS style.

$("p").add("div").css({"border": "2px solid green"});

Run code

The example above can also be written as follows.

$("p, div").css({"border": "2px solid green"});

Note

  • The .add() method additionally selects other elements together with the selected elements. It is not a method that inserts new elements. Use .append(), .prepend(), and similar methods when adding new elements.

.addBack() Method

The .addBack() method adds the previously selected elements back to the current selection.

When HTML elements exist as follows:

<div id="after">
  <p>After applying .addBack()</p>
  <p>Hello. This is devkuma.</p>
</div>

The following example first uses find() on the <div id="after"> element to select <p> elements, then additionally selects <div id="after"> with .addBack() and sets the CSS style.

$("div#after").find("p").addBack().css({"backgroundColor": "aqua"});

Run code

In the example above, without .addBack(), only the <p> elements would have their styles set.

.each() Method

The .each() method iterates over the selected elements and runs the callback function passed to it for each element.

When HTML elements exist as follows:

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

The following example selects <li> elements and runs a callback function while iterating over them. The callback function receives the index and adds a class only when the index is even.

$("li").each(function(index) {
    if (index % 2 == 0) {
        $(this).addClass("even");
    }
});

Run code

.end() Method

The .end() method restores the set of selected elements to the state before the last executed method.

When HTML elements exist as follows:

<p id="after">After applying .end() <span>This is devkuma.</span></p>

The following example first uses find() on the <p id="after"> element to select <span>, then uses .end() to cancel .find() and select <p id="after">, setting its CSS style.

$("p#after").find("span").end().css({"border": "2px solid green"});

Run code

In the example above, without .end(), the <span> element inside the <p> element would be selected and styled.

.offsetParent() Method

The .offsetParent() method finds the closest positioned element among the parent elements in the DOM tree and wraps it as a jQuery object. Here, positioned means CSS position values such as relative, absolute, and fixed.

If no element with such a position setting exists, the <html> element becomes the reference.

In other words, the parent element used as the reference by .position() can be checked with .offsetParent().

When HTML elements exist as follows:

<div class="container">
    <div>div (grandparent)
        <ul style="position:relative;">ul (parent)
            <li class="me">li (child)
                <span>span (grandchild)</span>
            </li>
        </ul>
    </div>
</div>

In the example below, the parent element used as the reference for the element whose class is me is the <ul> element whose CSS style is set to position:relative;.

$(".me").offsetParent().css("border", "2px solid red");

Run code

If the <ul> element in the example above does not have position:relative;, the <html> element becomes the reference.

.contents() Method

The .contents() method selects all child elements of the selected element, including text nodes and comment nodes.

The following example selects all child elements of the <iframe> element and changes the CSS style only of <a> elements inside it. When the button is pressed, the background color of <a> elements among all child elements loaded in the <iframe> element changes.

$("button").on("click", function() {
    $("iframe")	.contents().find("a").css("backgroundColor", "#BADA55");
});

Run code

References