今回は、jQueryで複数要素から、任意の場所の要素を取得する方法を記載してみます。
「親要素や子要素ってjQueryでどう指定するの？」や「祖先にさかのぼって指定ってできるの？」などの疑問に対して、分かりやすくサンプルコードを用いて詳しく記載してみようと思います。
という事で、それでは今回はッ、
上記について記載していこうと思います…。
parent()メソッドは、指定したセレクタの親要素を取得するメソッドです。
セレクタではli要素である#firstを取得していますが、parent()メソッドによって、親要素であるul要素の背景が紺色（#4c5482）になっています。
徹底的にこだわるプレミアムプランの詳細を見る
お問い合わせから納品まで 制作の流れを解説
children()メソッドは、parent()メソッドの反対で、子要素を取得するメソッドです。子要素には複数の要素がある可能性があるので、パラメータにセレクタを指定することで、さらに絞り込むことができます。
上記サンプルでは、children(".even")として、クラスevenの子要素を取得しています。
上記で紹介したparent()メソッドは、親要素を取得するメソッドでした。複数形のparents()メソッドでは、祖先要素を取得することができます。
まずセレクタで指定している#firstというli要素には、ul要素、div.outerなど、いくつかの祖先要素があります。それら祖先の中から、パラメータで指定した要素を取得することができます。上記のサンプルでは、.outerというクラスの付いた要素を取得し、背景を紺（#4c5482）にしています。
find()メソッドはparents()メソッドの逆です。子孫要素を取得するメソッドです。find()メソッドには、必ずパラメータを指定します。
ul要素の子孫にあたるa要素を取得して、クラス「icon」を付けてみました。
first()/last()メソッドは、それぞれ１番最初の要素、最後の要素を取得するメソッドです。たくさんある要素の中から、最初または最後のひとつを指定するときに便利なメソッドです。パラメータは指定することができません。
上記サンプルでは、最初と最後のリストが指定された状態になります。
eq()メソッドは、何番目の要素かを番号で指定して取得することができるメソッドです。例えば２番目の要素ならeq(1)、３番目の要素ならeq(2)と記述します。少し混乱しそうですが、プログラムの世界では、数を０（ゼロ）から数えることが多くなります。この場合も「０」が１番目「1」が２番目になります。
上記サンプルでは、eq(1)として、２番目のli要素を取得しています。また、パラメータに「-」（マイナス）の値を入れると、下から何番目という指定ができます。ただしこの場合は、-1から数え、-1が一番下、-2が下から２番目となります。
という事で今回は、jQueryで複数要素から、任意の場所の要素を取得する方法について、サンプルコードを交え記載してみました。
今回の内容で、要素の指定方法が大幅に広がったことと思います。個人的には、ここまで要素の指定を複雑に指定することは少ないですが、jQueryのプラグインなどであるスライダーを多少、カスタマイズしようとプログラムコードを見てみますと、結構な頻度で複雑に要素を指定してある場合が、多々ございます。
しっかりと理解して、単純に要素を指定できない場合などには、とても便利で重宝する記述方法になることと思います。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
売上を伸ばすECサイト運営代行サービス
プロ仕様の品質ホームページ用撮影サービス
