ホームページ、ページのカスタマイズなど、お客様のEC事業をレベルアップいたします。今回は、jQueryの属性セレクタで前方・後方の一致を使って要素を指定する方法を記載してみます。「トラバース系メソッドってなに?」や「HTML内を便利に検索したいけどどうやるの?」などの初心者の方の質問に答えるべく、トラバース系メソッド、属性セレクタで前方・後方の一致を使って要素を指定する方法を詳しく記載してみようと思います。・jQueryトラバース系メソッドってなに?・ひとつ前の要素を取得するprev()メソッド・ひとつ後ろの要素を取得するnext()メソッド・前の兄要素を全て取得するprevAll()メソッド・後ろの弟要素を全て取得するprevAll()メソッド上記について記載していこうと思います...。jQueryトラバース系メソッドってなに?今回ご紹介するトラバース系のメソッドは、今までのメソッドとは少し異なります。何らかの処理を加える、という訳ではなく、セレクタで指定した要素を基準にして、さらにそこから要素を検索して指定するためのメソッドになります。「さらにそこから要素を検索して指定」となると多少混乱することと思います。それならば初めからセレクタで指定してしまえばいいような気がしますが、実際にjQueryのコーディングをしてみると、これらのトラバース系メソッドは、とても便利で使い勝手の良いメソッドになります。トラバースとは、横断するという意味になります。HTML内の要素を横断的に検索して、柔軟に要素を指定するためのメソッドです。今後jQueryでコーディングを行っていこうと思っている方には、ぜひ覚えて頂きたいメソッドです。ひとつ前の要素を取得するprev()メソッドprev()メソッドは、セレクタで指定した要素の、ひとつ前の兄要素を取得するメソッドです。下記サンプルコードと表示サンプルを見比べると、サンプルのHTMLソースでは、3番目のli要素にidが記述されています。id=”third”>jQuery</li></ul>・・省略・・</body></html>HTML★CSSjQueryセレクタでは3番目のli要素を指定していますが、prev()メソッドによって、ひとつ前のli要素を取得し、addClass()メソッドでクラスを追加しています。ひとつ後ろの要素を取得するnext()メソッドnext()メソッドは、prev()メソッドの反対で、ひとつ後ろの弟要素を取得するメソッドです。下記サンプルのHTMLソースでは、2番目のli要素にidを記述しています。id=”second”>CSS</li><li>jQuery</li></ul>・・省略・・</body></html>HTMLCSS★jQueryセレクタでは2番目のli要素を指定していますが、next()メソッドによって、3番目のli要素が対象となっています。前の兄要素を全て取得するprevAll()メソッドprev()メソッドは、ひとつ前の兄要素を取得するだけでしたが、prevAll()メソッドを使うと、前に記述されている兄要素を全て取得することができます。id=”third”>jQuery</li></ul>・・省略・・</body></html>★HTML★CSSjQueryセレクタでは3番目のli要素を指定していますが、それより前の兄要素である2つのli要素が取得できることとなります。後ろの弟要素を全て取得するprevAll()メソッドnextAll()メソッドは、prevAll()メソッドの反対になります。後ろに記述されているすべての弟要素を取得します。id=”first”>HTML</li><li>CSS</li><li>jQuery</li></ul>・・省略・・</body></html>HTML★CSS★jQueryセレクタでは1番目のli要素を指定していますが、2番目以降の弟要素であるli要素がすべて取得できています。prevAll()、nextAll()は、セレクタを指定することもできる!prevAll()やnextAll()は、前や後ろの要素全てを取得することができますが、セレクタを指定することで、特定の要素のみを取得できるようになります。下記のサンプルでは、prevAll(“dt”)として、兄要素にあたるdt要素のみ(dd要素は除く)を取得しています。Languageの略。id=”point”>jQuery</dt><dd>JavaScriptのライブラリのひとつです。Languageの略。jQuery・JavaScriptのライブラリのひとつです。兄要素のうち、dt要素のみアイコンがつきました。いう事で今回は、jQueryの属性セレクタで前方・後方の一致を使って要素を指定について、サンプルコードを交え記載してみました。初心者の方では、「初めからセレクタを直接指定したら?」と思う方もいる事と思います。実際のWeb制作の現場では、「〇〇以外」などの指定方法を使うことが多々ございます。上記の記述方法を覚えていると、コーディングの際は便利だと感じることも、結構な頻度であります。初めのうちはあまり使うことがないことと思いますが、しっかりと理解しておくことをオススメします。今回はここまで...。お仕事のご依頼は↓コチラより...、それではまた次回...。私はWeb制作をすべて独学で勉強してきました。今も継続中で、すでに16年ほど勉強中です。