Ownedmedia ウェブ制作に役立つコンテンツを発信中!

コーディング 2016.03.30

jQueryのトラバースメソッドについて

Tags: ,
最終更新日:Update

前回の記事【ウェブサイトコーディングでよく使用するjQueryセレクタのまとめ】でセレクタについてまとめてみましたが、セレクタだけでは目標とする要素の選択が難しい場合もあります。そこでトラバースメソッドと呼ばれる手法を使うことでさらに要素を絞り込むことが可能になります。

 

そこで今回はjQueryのトラバースメソッドについてまとめていきたいと思います。

 

走査選択系

要素の位置関係を対象に目的とする要素を選択します

 

$(“E”).parents() E要素を包括する全ての先祖要素を選択
$(“E”).parent() E要素を包括する親要素を選択
$(“E”).closest(“F”) E要素を包括する先祖要素のうちE要素に最も近いF要素を選択
$(“E”).children() E要素の子要素を選択
$(“E”).find(“F”) E要素の子孫要素に含まれるF要素を選択
$(“E”).siblings() E要素の兄弟要素を選択
$(“E”).prev() E要素の隣接する兄要素を選択
$(“E”).prevAll() E要素の兄要素すべてを選択
$(“E”).next() E要素の隣接する弟要素を選択
$(“E”).nextAll() E要素の隣接する兄要素を選択

 

絞り込み系

特定の要素を指定した条件下でさらに絞り込みを行います

 

$(“E”).eq(n) E要素のn番目のみを選択する
$(“E”).hasClass(クラス名) E要素の中で指定したクラス名を持つ要素を選択する
$(“E”).filter(指定する条件) E要素の中で指定した条件に合うものを選択する
$(“E”).not(指定する条件) E要素の中で指定した条件に合うものを除いた要素を選択する
$(“E”).slice(n,m) E要素の中で0を開始としてn番目からm番目までを選択

 

トラバースメソッドはDOM(Document Object Model)と呼ばれる仕組みの中で、ツリー状に広がる各要素の間を辿るように走査していきます。

 

このトラバースメソッドとセレクタを併用することで、選択した要素をさらに絞り込んだり、複数の条件を重ねてより詳細に要素を取り出すことができます。

 

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?