Home/ Questions/Q 6752055
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T13:00:00+00:00

I was wondering how jQuery traverses the DOM when you use a selector. Does

  • 0

I was wondering how jQuery traverses the DOM when you use a selector.
Does it look up each “first level” element, and then look inside each one of them? Or does it look at every children of those “first level” elements one by one?

Let me explain what i imagined with some quick examples, given the following selector :

$("div p#target")

Does it proceed more like :

[1] <div>
    [3] <div>
        [5] <p id="target"></p>
        </div>
    </div>
[2] <div>
    [4] <div>
            <p></p>
        </div>
    </div>

Or like :

[1] <div>
    [2] <div>
        [3] <p id="target"></p>
        </div>
    </div>
    <div>
        <div>
            <p></p>
        </div>
    </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Traversal happens in the same order the elements are in the DOM:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>query traversal order</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    </head>
    <body>
        <ul>
            <li id="parent1">
                <ul>
                    <li id="child1"></li>
                    <li id="child2"></li>
                </ul>
            </li>
            <li id="parent2">
                <ul>
                    <li id="child3"></li>
                    <li id="child4"></li>
                </ul>
            </li>
        </ul>
        <script type="text/javascript">
            // keep a list of ids
            var arr = [];
            // loop over all li elements
            $('li').each(function(){
                // add their id to the array
                arr.push($(this).attr('id'));
            });
            // show contents of the array
            alert(arr.join(', '));
        </script>
    </body>
</html>

    This will alert “parent1, child1, child2, parent2, child3, child4”;

    • 0