Почему $ ("div> div") работает иначе, чем $ ("div"). Children ("div")?

Question

У меня странная проблема, когда я не могу использовать обычный селектор шипения, чтобы правильно выбрать что-то в jQuery:

Эти две строки не делают одно и то же.

ele.children("div.a > div").addClass("badActive");
ele.children("div.b").children("div").addClass("active");

http://jsfiddle.net/wGvEu/1/

Answer 1

ele.children("div.a > div") выбирает div s, которые оба являются потомками элементов div.a (из комбинатора >) и ele (из вызова .children()). Это также означает, что ele сам по себе представляет элемент div.a.

ele.children("div.b").children("div") выбирает div s, которые являются дочерними элементами div.b элементов, которые сами являются дочерними элементами ele. Сам по себе ele может быть элементом любого типа, но он должен содержать div.b дочерних элементов, а его div.b дочерних элементов должен иметь div дочерних элементов.

Как говорит Феликс Клинг в приведенном выше комментарии, вам нужно использовать .find() для поиска всех потомков. Это относится к вашему первому делу с комбинатором >, как ele.find("div.a > div").

Answer 2

Вероятно, что вы хотите:

ele.find("div.a > div").addClass("active");

Это использует только один переключатель шипения и достигает того, что вы хотите.BoltClock прав насчет того, почему ваши два примера не работают одинаково.Другой способ сказать это: .children() получает только прямые дочерние элементы, тогда как .find() получит что-либо в иерархии ниже «текущего» элемента.