为什么这个第 n 个子元素返回一个意外的元素？

Question

html & jQuery 位于下面，它也位于 http://www.jsfiddle.net/4fWUU。我期待得到 'wrapper' 的第二个子元素，即 id 为 'parent2' 的 div。然而返回的 id 是我不期望的“child1_1_1_2”。

我可以使用 $o1.children()[1] 获得正确的 div，但我想知道为什么 nth-child 无法正常工作。

有什么想法吗？

<div id="wrapper">
        <div id="parent1">
            <div id="child1">
                <div id="child1_1">
                    <div id="child1_1_1">
                        <div id="child1_1_1_1">
                        </div>
                        <div id="child1_1_1_2">
                        </div>
                    </div>
                    <div id="child1_1_2">
                    </div>
                </div>
                <div id="child1_2">
                    <div id="child1_2_1">
                    </div>
                </div>
            </div>
        </div>
        <div id="parent2">
        </div>
    </div>


var $o1 = $("#wrapper");
var id = $("div:nth-child(2)",$o1).attr("id");

alert(id);

Answer 1

按上下文搜索与 .find() 相同，它在向上 DOM 树之前首先选取最深的后代。 :nth-child() 如果您不指定父元素，则不关心父元素，因此每个其他元素包含的 div （是其子元素） #wrapper 或里面的任何内容都会被选中。

.children() 方法，正如它上面所说的那样，将选择限制为元素的子元素，因此任何匹配的内容都将始终是子元素。使用它，但传递 :nth-child() 选择器，如下所示：

var id = $o1.children('div:nth-child(2)').attr('id');

或者按照 Nick Craver 的建议，使用子选择器 > 将上下文搜索限制为#wrapper：

var id = $('> div:nth-child(2)', $o1).attr('id');

Answer 2

该选择器实际上有 4 个实例：

var $o1 = $("#wrapper");
$("div:nth-child(2)",$o1).each(function () {
      alert($(this).attr("id"));
});