jQueryのトラバースメソッドについて
最終更新日: Update!!
前回の記事【ウェブサイトコーディングでよく使用するjQueryセレクタのまとめ】でセレクタについてまとめてみましたが、セレクタだけでは目標とする要素の選択が難しい場合もあります。そこでトラバースメソッドと呼ばれる手法を使うことでさらに要素を絞り込むことが可能になります。
そこで今回はjQueryのトラバースメソッドについてまとめていきたいと思います。
トラバースメソッドはDOM(Document Object Model)と呼ばれる仕組みの中で、ツリー状に広がる各要素の間を辿るように走査していきます。
このトラバースメソッドとセレクタを併用することで、選択した要素をさらに絞り込んだり、複数の条件を重ねてより詳細に要素を取り出すことができます。
走査選択系
要素の位置関係を対象に目的とする要素を選択します$("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番目までを選択 |
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories