Селекторы JQuery не то, что я ожидал

Question

Использование jQuery 1.4.2 (IE8 в режиме совместимости)

С учетом следующей структуры:

<div id='something'>something</div>
<div id='parental'>
    <div><p>hi there</p> goats</div>
    <p>hello again</p>
</div>
<div> end of the line</div>

и этого кода:

var Fred= $('#parental');
$('div').css({color: 'blue'});
Fred.children('div').css({color: 'red'});
Fred.children('div').children('p').css({color:'green',border:'solid red 2px'});
Fred.children('div p').css({color: 'orange'});
Fred.children('div>p').css({border:'solid #FFFF00 2px'});

• "что-то" и "конец строки" синие, как я и ожидал
• "козлы" красные, как я и ожидал.
• "привет там" - зеленый с красной рамкой (я ожидалэто будет оранжево-желтая рамка)
• «Здравствуйте еще раз» - оранжевый с желтой рамкой (не то, что я ожидал).

Почему селектор Fred.children('div p') и Fred.children('div').children('p') и Fred.children('div>p') не выбираете одно и то же?

Смотрите это в действии здесь: http://jsfiddle.net/bxAzN/

Answer 1

Поскольку .children() выполняет следующие действия:

Получает потомков каждого элемента в наборе совпадающих элементов, дополнительно отфильтрованных селектором.

Теперь возьмите div p.Единственными дочерними элементами #parental являются div и p элемент..children('div p') соответствует только элементу p, так как он имеет div в качестве предка (сам #parental).Но дочерний элемент div явно не соответствует этому селектору.
Вы должны подумать о children() как , чтобы все дочерние элементы были отфильтрованы этим селектором , что отличается от , получая всех потомков, соответствующих этому селектору.Для этого вам нужно будет использовать find().

Fred.children('div').children('p'), в отличие от него сначала берет все div потомков Fred, а затем выбирает все div 's p дети.

Answer 2

children () эквивалентно выполнению «>» в ​​селекторе.

Сайт jquery говорит об этом ...

путешествует только на один уровень вниз DOM дерево

, поэтому использование children('div p') не сработает, потому что вы пытаетесь заглянуть в два этапа вниз по дереву DOM. Использование children('div>p') действительно работает, потому что это фактически 1 селектор, хотя я понимаю, почему это сбивает с толку.

Если вы хотите, чтобы функция выполняла то, что вы пытаетесь сделать, вам нужно взглянуть на find().

Answer 3

попробуйте изменить детей на найти

var Fred= $('#parental');
$('div').css({
    color: 'blue'
});
Fred.children('div').css({
    color: 'red'
});
Fred.find('div').find('p').css({
    color: 'green',border:'solid red 2px'
});
Fred.find('div p').css({
    color: 'orange'});

Fred.find('div>p').css({
    border:'solid #FFFF00 2px'
});​

его выбор такой же "привет там"

http://jsfiddle.net/bxAzN/2/

Children только смотрит на непосредственных потомков узла, в то время как find проходит через весь DOM ниже узла, поэтому потомки будут быстрее.Какой из них использовать, зависит от того, хотите ли вы рассматривать только непосредственных потомков или все узлы ниже этого в DOM.-tvanfosson

Оба потомка и find не обязательно будут давать один и тот же результат: find () получит вам любой узел-потомок, тогда как children () получит только тех непосредственных потомков, которые соответствуют.

Таким образом, find () будет медленнее, так как он должен искать каждый узел-потомок, который может быть совпадением, а не только непосредственные дочерние элементы.Джон Феминелла