jQuery: выберите только дочерние узлы первого уровня.

Question

Я пытаюсь заставить что-то работать, что должно быть довольно легко с jQuery.Все, что я хочу, это выбрать братьев и сестер выбранного узла и НЕ дочерних элементов брата!

<div id="test">
    <p>First Paragraph
        <p class='border2'>SUB paragraph
            <p class='border3'>SUB SUB paragraph</p>
        </p>
    </p>
    <p>Second Paragraph</p>
    <p>Third Paragraph</p>
    <p>Fourth Paragraph</p>
</div>

В этот момент я пробовал много разных вещей, ноони не ведут себя, как ожидалось.Я пробовал, например:

• $("div").find("p").andSelf().addClass("border");
• $("div > p").addClass("border");
• $("div p:first").nextAll().andSelf().addClass("border");
• $("#test ~ p").addClass("border");

Мой фрагмент кода можно найти по адресу jsFiddle .

Answer 1

Вы не сможете сделать это, потому что ваша разметка недействительна.

Вы не можете иметь <p>, вложенное в <p>, поэтому браузер выбрасывает вложенные p s.

Вот ваша скрипка , но с обновленным CSS, чтобы показать, что они больше не являются вложенными.

В * можно вставить только встроенные элементы1014 *.

Answer 2

Ваша проблема вызвана тем, что

Элемент P представляет абзац.Он не может содержать элементы уровня блока (включая сам P).

Взят из Спецификации .

Браузеры рассматривают каждый абзацкак прямой потомок исходного div, так как он не может содержаться в другом p.Вы выбрали не тот элемент, с которым нужно связываться:)