jQuery如何遍历DOM?

Pio*_*oul 6 jquery

我想知道当你使用选择器时jQuery如何遍历DOM.它是否查找每个"第一级"元素,然后查看每个元素?还是一个一个地看着那些"第一级"元素的每个孩子?

让我用一些简单的例子解释我想象的东西,给出以下选择器:

$("div p#target")

是否更像是:

[1] <div>
    [3] <div>
        [5] <p id="target"></p>
        </div>
    </div>
[2] <div>
    [4] <div>
            <p></p>
        </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

或者像:

[1] <div>
    [2] <div>
        [3] <p id="target"></p>
        </div>
    </div>
    <div>
        <div>
            <p></p>
        </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

Kri*_*ris 1

遍历发生的顺序与元素在 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>
Run Code Online (Sandbox Code Playgroud)

这将提醒“parent1、child1、child2、parent2、child3、child4”;