jquery - $("div > div") の動作が $("div").children("div") と異なるのはなぜですか?

Question

通常のシズルセレクターを使用してjQueryで何かを正しく選択できないという奇妙な問題があります。

これらの 2 つの行は同じことを行いません。

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両方のdiv.a要素の子であるを選択します。また、それ自体が要素を表すことも意味します。>ele.children()elediv.a

ele.children("div.b").children("div")div要素の子でありdiv.b、それ自体が の子である を選択しeleます。eleそれ自体はどのような種類の要素でもかまいませんが、子を含む必要がdiv.bあり、そのdiv.b子には子が必要divです。

.find()Felix Kling が上記のコメントで述べているように、すべての子孫を検索するには を使用する必要があります。これは、>コンビネータを使用した最初のケ​​ースに適用されますele.find("div.a > div")。

Answer 2

おそらくあなたが望むのは：

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

これは、シズル セレクターを 1 つだけ使用して、目的を達成します。BoltClock は、2 つの例が同じように機能しない理由について正しいです。別の言い方をすれば.children()、直接の子のみを取得し.find()ますが、「現在の」要素の下の階層にあるものはすべて取得します。