Question

我想知道当你使用选择器时jQuery如何遍历DOM。它是否查找每个“第一级”元素，然后查看每个元素？或者它是一个一个地看着那些“第一级”元素的每个孩子？

让我用一些简单的例子解释我想象的内容，给出以下选择器：

$("div p#target")

它是否更像是：

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

或者喜欢：

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

Answer 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>

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

Answer 2

如果你的意思是它通过它们的顺序，我假设这不是jQuery本身，而是实际的DOM函数。这可能是依赖于实现的，我不会依赖它（除非它在规范中定义）。

你想要了解这些细节需要完成什么？也许我们可以帮助解决实际问题。

Answer 3

在您的示例中，我希望它会像这样处理：

<div> 
[2] <div>                   //check it matches the selector
    [1] <p id="target"></p> //document.getElementById is cheap
    </div>
</div>
<div>
    <div>
        <p></p>
    </div>
</div>

jQuery如何遍历DOM？

3 个答案: