Question

html＆amp; jQuery在下面，它也在http://www.jsfiddle.net/4fWUU。我期待得到'包装'的第二个孩子，这是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()相同，:nth-child()会在前往DOM树之前获取最深的后代。如果您没有指定父级，则div不关心父级，因此#wrapper中的某些其他元素或其他任何元素所包含的.children()所包含的每个:nth-child()都会被选中

正如在锡上所说的那样，var id = $o1.children('div:nth-child(2)').attr('id');方法限制了元素子元素的选择，所以匹配的任何东西都将是一个孩子。请改用它，但如下所示传递>选择器：

#wrapper

或者正如Nick Craver建议的那样，使用子选择器var id = $('> div:nth-child(2)', $o1).attr('id');将您的上下文搜索限制为{{1}}的孩子：

{{1}}

Answer 2

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

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

为什么这个nth-child会返回一个意想不到的元素？

2 个答案: