jQueryでよくつかう”this”の親要素や子要素を指定する記述をすぐに忘れてしまうので、メモ。

/* 110605 */
リライト版エントリーをアップしました。
そちらのほうがまだ見やすいと思いますので、、ご参照いただければ!

/* 110522 */
$(“ul”,this).css」についてコメントにてご指摘いただきました!
エントリー内で、これは「間違い」と記述しておりますが、子孫要素を取得できる正しい書き方でした。
詳細についてはお手数ですが、コメント欄をご覧ください。
近々、コメントでいただいた内容も含めて、一度リライトしたエントリーを書こうと思っております。

/* 110131 */
子要素指定方法についての記述で、間違いをご指摘いただいたので、訂正しました

親要素

thisの親要素を取得する。

$(this).parent().css

参:jQueryで親要素のスタイル変更 : JSをつらつらとダラダラと書く

parentのカッコを忘れてて、子一時間悩むとかもう止めたい…

子要素

thisの子要素(ここでは<ul>)を取得する。

$(this).children("ul")

$(“ul”,this).css
→これ、間違い(補足は後述)
$(this).find(“ul”)
→これも、間違い(補足は後述)

参:jQueryでthisの子要素を取得するやり方いろいろ | Base Views

※なぜ間違いだったのか

前述のそれぞれがどう違うのか、について。

$("ul",this).css

「ulタグ」と「自分」を〜する。(この場合はCSSを変更)

thisもほかの関係ないulも対象ってことですね。。
参:selector1, selector2, …, selectorN – jQuery 日本語リファレンス

上記説明は

$("ul,this").css

の場合について、でした。

$("ul",this).css

の正しい説明は、jQuery(expression, context) – jQuery 日本語リファレンスをご覧ください。
この記述では、thisの中からulを探す、つまりfind()のようなことを出来るようです。

$("#dummy").css

のような記述は、つまり”"以降を省略しているようですね。
つまりドキュメント内から#dummyを探す、と。(上記リンクのサンプル3参照)

他参考リンク
jQuery() – jQuery API

initiumさん、kzさん、understandardさん、ありがとうございました!


$(this).children("ul")

「自分」の中の「子要素」にある「ulタグ」を〜する

参:children([expr]) – jQuery 日本語リファレンス


$(this).find("ul")

「自分」の中の「子孫要素」にある「ulタグ」を〜する

子供も孫もひ孫(ryも探せるってことですね。
参:find(expr) – jQuery 日本語リファレンス

もっとちゃんと勉強しないとですね。

結論(?)

持つべきものは、偉大な先輩…☆
ぱんださん、ありがとうございました!!!