まよねこ inside

jQueryで、”this”の親要素、子要素（子孫要素）を指定する記述方法のメモ、リライト版です。
（元々はこちら）

親要素

thisの親要素を取得

$(this).parent()

“親要素を全て返す“記述です。
近いものとして、”ルートを除く先祖要素を全て返す“parents()や、”開始要素から最も近い親要素を選択“するclosest()もあります。

参：
parent([expr]) – jQuery 日本語リファレンス
parents([expr]) – jQuery 日本語リファレンス
closest([expr]) – jQuery 日本語リファレンス
jQueryで親要素のスタイル変更 : JSをつらつらとダラダラと書く

子要素・子孫要素

thisの子要素、もしくは子孫要素（ここでは<ul>）を取得

子要素

$(this).children("ul")

子孫要素

$(this).find("ul")

$("ul",this)

それぞれのプチ解説

$(this).children("ul")

“直下にある子要素のみ“を選択。”孫要素以下は対象外“となります。
「”ul”」部分は絞り込みの条件式なので、この場合選択したい「ul」以外に子要素がなければ記述しなくても問題ないと思います。
参：children([expr]) – jQuery 日本語リファレンス

$(this).find("ul")

thisが持つ”全子孫要素から、指定条件式に合致するものを選択“します。
直下の子要素だけでなく、子孫要素から条件（”ul”）に合うものを探すということですね。
参：find(expr) – jQuery 日本語リファレンス

$("ul",this)

公式の説明によると、”selector context is implemented with the .find() method, so $(‘span’, this) is equivalent to $(this).find(‘span’).“とのことですので、行っている処理内容は、上のfind()と同じようです。
なので、子孫要素から条件に合うものを探すという処理になります。
参：jQuery(expression, context) – jQuery 日本語リファレンス

サンプル

自分のメモ用ですが、簡単なサンプルを書いたので載せておきます。
動作サンプル

また前エントリーのコメントにてmattari_pandaさんがつくってくださった計測用のサンプルもこちらにも載せておきます。（mattari_pandaさんご快諾ありがとうございます！）
速度測定サンプル
サンプルを見ていただければ、mattari_pandaさんのコメント内容にある、以下の点がわかるかと思います。

• “$(‘ul’, this)はjQueryの中でfind()に展開しているようなので、今回のような場合はfindを使ったほうが若干ですがパフォーマンス的に良い“
• “$(this)を一回の処理の中で繰り返す場合はあらかじめ変数に入れておくと、処理の速度も速く“なる

ご参考までに。

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

Thanks☆：
mattari_pandaさん、initiumさん、kzさん、understandardさん

---

以下おまけ

$("#dummy").css

上記のような記述は、”"以降、つまり範囲指定を省略しているようですね。
ドキュメント内から#dummyを探す、と。（jQuery 日本語リファレンスのサンプル3参照）

また、パッと見、似ていて私も誤解していたのですが、まったく違うので注意！

$("ul",this)

$("ul,this").css

後者は複数のセレクタを指定する記述です。
参：selector1, selector2, …, selectorN – jQuery 日本語リファレンス

---

最後に。
前エントリーよりは、リファレンス等を確認して載せてはおりますが、必ずしも上記の内容が正しいとは限りません。
不具合等の責任は負いかねますので、その点だけご留意いただければと思います。
私と同じようなjQuery初心者の方の参考になれば幸いです！

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 日本語リファレンス

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

結論（？）

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

じぶんの個人サイトで、外部リンクを別ウィンドウで開くのをjQueryでやりたいなーと思って、ちょっとぐぐった＆エラーとか出たので自分用メモ。

ぐぐって、なんとなくこの辺（↓）を参照させていただくことに。

• jQueryを使って、外部サイトへのリンクだけ別ウィンドウで開く方法｜AdDe – 静岡のデザイン制作会社アドテクニカのデザイナーブログ
• targetを使わず外部リンクを新しいウインドウで開く｜KADOYAN.com

さて、残念ながらアタシにはどっちがイイとかよくわからないので、、、ひとまず前者のソースをお借りしてやってみます。
いつだかにダウンロードしてたjquery.js（v1.3.2）を設置し、
新規JSファイルに、上のエントリーのソース（これ↓）をコピペ、

$(document).ready( function () {
$('a[@href^="http"]').not('[@href*="www.sample.com"]').click(function(){
window.open(this.href, '');
return false;});
});

「www.sample.com」をアタシの場合は「mayoneco.com」に変更し、保存。
HTML側に上記2つのJSファイルへのリンクつけまして、これでOK！
…のは・ず・が、、、
構文エラーだよ！とFirebugで下記のようなエラーが出てしまいました。

[Exception... "'Syntax error, unrecognized expression: [@href^=http://]‘ when calling method: [nsIDOMEventListener::handleEvent]” nsresult: “0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)” location: “” data: no]

はいはい、何言ってるんでしょうかね？ふふふ…と、英語のエラーが出るとひとまず目を逸らしたくなるアタシですがw、調べたら、このへんが怪しそう！

• すなぶろっ！ – スナメリ、jQueryを導入す。
• JQuery selector problem – ‘Syntax error, unrecognized expression’ fix :: James Allen’s Coldfusion and Internet Technology Blog

よくよく見てみると、、

The @ syntax is no longer supported in JQuery 1.3+.
So the simple fix is to just remove the @ and it’ll work

jQuery 1.3以降のバージョンでは@をつかう構文がサポート外ってコトみたいですな。
今回アタシが設置していたのはバージョン1.3.2。つまりサポート外。
“@”を消せばOK！って書いてあるので、よくわからないまま消したら本当にOKでしたw

JSの知識をきちんと入れてないまま使ってる上に、バージョンによる構文の違いなんてほとんど意識外なもので；、いい勉強になりましたぁぁ。
でもって、すぐ忘れるので今回は忘れないうちにメモメモ。

とゆーわけでgoogle先生召喚。
一発解決！

cssメソッドに2つのパラメーターを与える場合、以下のようなcodeが考えられる。

$("p").css("color","#000000").css("background-color","#0033cc")

この様に複数のプロパティを同時に操作する場合、以下の記述で対応できる。

$("p").css({"color":"#000000","background-color":"#0033cc"})

参照元：jQuery:CSSへのアクセス | [E2]e2esound.com

なるほどね～
こつこつと本見たりして勉強するのもいいんだけど、やっぱり実践で必要に迫られてやろうとすると身につくの早いと思う。
とはいえ、アタシはもう少し基礎的部分を勉強して土台を固めたほうがきっともっと幅が広がるだろうな、と。

ロクナナのワークショップ、やっぱ行こうかな～
自分への気合入魂も込めて。

何しろ、自分で調べて、たとえ9割コピペでも笑、思い描いたものが出来ると充実感ある！
最近、JS楽しいなーと思えている。
楽しければ何でも出来るよね！！