【jQuery】thisの親や子要素の指定方法
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 日本語リファレンス
もっとちゃんと勉強しないとですね。
結論(?)
持つべきものは、偉大な先輩…☆
ぱんださん、ありがとうございました!!!
10 Comments
どもです。
元ページも勘違いされてらっしゃるようなので、少し補足です。
子要素のところだけど、3つあるものすべて挙動が違います。
$(“ul”,this).css
だと「ulタグ」と「自分」を〜する。(この場合はCSSを変更)
(元ページは偶然動いてる感じですね、、、)
$(this).children(“ul”)
だと「自分」の中の「子要素」にある「ulタグ」を〜する。
$(this).find(“ul”)
だと「自分」の中の「子孫要素」にある「ulタグ」を〜する。
HTMLによってはうまいこと動く場合もあるけど、
この場合の正解は2番のみです。
1番はここ
http://semooh.jp/jquery/api/selectors/multiple/
2番はここ
http://semooh.jp/jquery/api/traversing/children/%5Bexpr%5D/
3番はここ
http://semooh.jp/jquery/api/traversing/find/expr/
それぞれ意味と使いどころが違うので
参考にしてみてください〜。
>mattari_pandaさん
おぉー!ありがとうございますー!!
(ちゃんと調べてないのバレバレ…反省。。。)
あとで訂正しておきますーっ
ありがとでした!!!
$(“ul”,this).css
は間違いとありますが、「jQueryデザイン入門」ASCII出版 P140によると、
【”(ダブルクオーテーション)で包まれたセレクターの後ろに,(カンマ)区切りでセレクターの範囲を指定できます。】
とあります。
実際この本では$(“セレクター”,this) が何度か出てきます。
指摘のある内容は $(“セレクター, this”) だとそうなるかもしれません。
(ダブルクオーテーションの位置が違うと思います)
この本を読んでたらこの記法が急に出てきて何のことかわからなかったので、ネットで検索したらたどり着きました。
ネットで検索しても中々事例・解説が無く、どちらが正しいのかわからなかったのですが、よく本を読み返すと書いてありました。
他では
http://blog.macaroniworks.net/2010/03/jquery-%E7%9F%A5%E3%82%89%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F%E5%AD%90%E8%A6%81%E7%B4%A0%E3%81%AE%E9%81%B8%E6%8A%9E%E6%96%B9%E6%B3%95/
に事例がありました。
1番はココな気がするよ◎
http://semooh.jp/jquery/api/core/jQuery/expression%2C+context/
>initium さん
コメント、及びご指摘ありがとうございます!
お返事が遅くなりまして失礼いたしました。
私も少々調べなおしました!
どうやらご指摘いただいた内容が正しいようですね!
また、後のkzさんにいただいたコメントのリンク先の記述内容が参考になりそうです。
それによりますと、
$(“ul”,this).css
では、find()メソッドのように、
thisの中からulを探す、ということが出来るようです。
どうやらjQueryの基本的な書き方のようですが、、全然知りませんで、お恥ずかしい限りです。。
追記および記事のリライト版をアップしようかと思います!
この度は、間違った情報により混乱させてしまいまして、申し訳ありません!
またコメントいただき大変ありがとうございました!!
おかげさまでまたひとつ、勉強することができました!
また何かありましたらご指摘等いただけると幸いです。
>kz さん
コメントありがとうございます!!
とても!!参考になりました!!!
基本のキが抜けたまま、jQuery使っていて、本当にお恥ずかしい。。
疑問点が解消されて大変助かりましたー!
教えていただいた点も含めて近々リライト版もエントリーしようかと思います。
またもしオカシな点がありましたら、ご指摘いただけるとありがたいです!
どうぞよろしくお願いいたします。
mayonecoさん、他の方々どうもです。
僕の認識が間違っていたようで、
いろいろご迷惑をかけてしまってすみません。
申し訳ありませんでした。
$(‘ul’, this)で
「自分の中(子孫要素)のulタグを探す(DOM取得)」で
問題ないです。
ついでなので、いろいろ計測してみました。
http://dl.dropbox.com/u/2732304/20110527_jq_test/index.html
コンソールを開いて、タイトル部分をクリックしてもらうと
計測結果がコンソールに出ます。
type1が
$(‘ul’, this)で取得する場合。
type2が
$(this).find(‘ul’)で取得する場合
ついでに
type3と4は$(this)をfor(){}のまえで変数に入れてみた場合です。
計測結果とjQueryの中を読むとどうやら$(‘ul’, this)はjQueryの中で
find()に展開しているようなので、今回のような場合はfindを使ったほうが
若干ですがパフォーマンス的に良いです。
またtype3と4を見てもらうとわかるように
テストのように$(this)を一回の処理の中で繰り返す場合は
あらかじめ変数に入れておくと、処理の速度も速くなります。
>mattari_panda さん
計測サンプルまでつくっていただいてありがとうございます!
>今回のような場合はfindを使ったほうが若干ですがパフォーマンス的に良い
そうみたいですね!なるほど!
>あらかじめ変数に入れておく
というのもきちんと利用してみようと思います。
改めてありがとうございました!
参考になりました!
>pion さん
ありがとうございます!!