前回の記事【ウェブサイトコーディングでよく使用する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）と呼ばれる仕組みの中で、ツリー状に広がる各要素の間を辿るように走査していきます。   このトラバースメソッドとセレクタを併用することで、選択した要素をさらに絞り込んだり、複数の条件を重ねてより詳細に要素を取り出すことができます。