0%

Designデザインワークショップ

Posted:2016.03.30

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

前回の記事【ウェブサイトコーディングでよく使用する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)と呼ばれる仕組みの中で、ツリー状に広がる各要素の間を辿るように走査していきます。

 

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

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】