Почему этот nth-child возвращает неожиданный элемент?

Question

html & jQuery находится ниже, и он также находится на http://www.jsfiddle.net/4fWUU. Я ожидаю получить второго потомка 'wrapper', который является div с идентификатором 'parent2'. Однако возвращенный идентификатор «child1_1_1_2», который я не ожидаю.

Я могу получить правильный div, используя $o1.children()[1], но я хотел знать, почему 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');

Или, как советует Ник Крейвер, используйте дочерний селектор >, чтобы ограничить контекстный поиск дочерними элементами #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"));
});