jQuery :: セレクタを使いこなす10のTraversing機能

2009/9/10 (Thu) at 7:00 pm

Nettuts+にセレクタを使いこなすための10のTraversingワザってのが載ってました↓

10 Really Helpful Traversing Functions in jQuery

レビューサイト等でよく使われるレーティングのガジェット、ユーザーがクリックするとスターマークが点いたり消えたりするヤツですね、あれを例題にして、jQueryのセレクタの機能についてチュートリアルしています。記事を読んだだけだとフーンってなかんじで忘れちゃいそうなので、例題サンプルの意味を日本語で書き出してみました。

元記事の方では、わかりやすい図版といっしょに解説されています。英語苦手な方はそっちの絵を見ながら読んだらいいかもです。

紹介されているものの中には「知ってるけどいままであまり使ってなかったもの」ってのがいくつかあって勉強になりました。jQueryのセレクタはむずかしいパズルみたいですよね。わ、わ、ワカラン！！！！と投げ出したくなると、idを量産して$('#ナントカ〜')で逃げてしまうという後ろ向きなことをよくやってます。あるいは、idを基点にしてどーこーするとかですね、たとえば、

$(this).parent().attr('id');

でthisの親要素のidを取得できるんで、それになにかキメの文字列、たとえば '-block' とかつけて、関連要素を選択したりとかですね、そういうことをよくやるんですが、この記事で紹介されているようなワザを使えば、write less, do moreな人生があったのかもしれないなと反省しつつ。

そういう話をだれかとしていましたら、id名で選択するのは動作速度向上の点からいって悪いことではないのですよと教わりましたが、それはそうなんでしょうけど、むやみやたらとidをつけまくるというのもバカっぽいかんじがしますし、また、元記事の方にも書かれている通り、それで対処しきれないケースもあるわけなので、こういうのもパパッと使えるようになりたいなと。

知らないヤツもありました。parents（←最後にsがある！）なんてあったのですね。これはparentと違って、body, htmlまで遡ってすべてのご先祖様を一挙選択できるそうです。実際にそんな使い方をしたらやたら重くなるでしょうから、あるていど範囲を限定しつつという使い道がよさそうですが。

1. children

$('.rating').children('.on');

クラス名ratingを持つ要素の子供たちの中から、クラス名がonの要素を選択する。

2. filter

$('.star').filter('.on');

クラス名starを持つ要素の中からクラス名onの要素だけを選択する。

3. not

$('.star').not(':even');

クラス名starを持つ要素の中から、偶数番目の要素を除外し、残った要素を選択する。

4. add

$('.star').add('.photo');

クラス名starを持つ要素を全選択し、さらにその中にclass名photoを持つ要素を含めて選択する。

5. slice

$('.star').slice(0, 2);

クラス名starを持つ要素の中から、index値0から始まって2番目までの要素を選択する。

6. parent

$('.star:first').parent();

クラス名starを持つ要素の中の最初の要素の、親要素を選択する。

7. parents

$('.star:first').parents('.container');

クラス名starを持つ要素の中の最初の要素の、すべての先祖（body, html要素まで遡る）の中から、クラス名containerを持つ要素を選択する。

8. siblings

$('.star:first').siblings(':odd');

クラス名starを持つ要素の最初の要素の、兄弟要素の中で、index値が奇数である要素を選択する。

9. prev & prevAll

$('.rating:nth-child(3)').prevAll();

クラス名ratingを持つ要素の中の、3番目の要素から見て、ソレより前の兄弟要素をすべて選択する。

10. next & nextAll

$('.rating:nth-child(3)').nextAll();

クラス名ratingを持つ要素の中の、3番目の要素から見て、ソレより後ろの兄弟要素をすべて選択する。

----------

前のエントリへ次のエントリへ

ふ

2009/9/10, 7:15 PM

追記。

traversingはやりすぎると動作にむだが生じるというか、重くなると思うんで、実際に使うときには、

$('..........', '#foo').bar(.....);

てなかんじで、範囲を限定しつつやったほうがよいと思われます。

コメント・プリーズ！

お名前 (your name)

(required)

url

(optional) ※公開されます。

メールアドレス (email)

(optional) ※公開されません。管理者にだけわかります。

コメント (comment)

(required)

クッキーにお名前、url、メールアドレスを保存する。

※クッキーに保存すると次回から入力を省略できるので便利ですが、お使いのコンピュータに情報が残りますので、公共のパソコンなどからアクセスするような場合はチェックをはずしたほうがよいでしょう。

※コメント中のhtmlタグは実体参照に変換されます。たとえば、『<』は『<』というかんじになりますのでhtmlタグをそのまま書き込んでくださってオッケーです。

PROFILE

藤居ヒロヤ。ウェブデザイナー／ウェブディレクター。ウェブデザインオフィス、3OT NET主宰。名古屋市中区。「優しいデザイン」「激しいデザイン」「正しいデザイン」「セクシーなデザイン」「泣けるデザイン」「もっともなデザイン」... 。あなただけのウェブデザインを丹精込めておつくり致します。見積り依頼等、お気軽にお問い合わせ下さい。

www. http://www.3ot.net/
email. admin [atmark] 3ot.net
phone. 052 323 7376

お問い合わせフォーム

ウェブデザイナーの日記