jQueryの属性セレクタで前方・後方の一致を使って要素を指定

今回は、jQueryの属性セレクタで前方・後方の一致を使って要素を指定する方法を記載してみます。

「トラバース系メソッドってなに？」や「HTML内を便利に検索したいけどどうやるの？」などの初心者の方の質問に答えるべく、トラバース系メソッド、属性セレクタで前方・後方の一致を使って要素を指定する方法を詳しく記載してみようと思います。

という事で、それでは今回はッ、

・jQueryトラバース系メソッドってなに？
・ひとつ前の要素を取得するprev()メソッド
・ひとつ後ろの要素を取得するnext()メソッド
・前の兄要素を全て取得するprevAll()メソッド
・後ろの弟要素を全て取得するprevAll()メソッド

上記について記載していこうと思います…。

jQueryトラバース系メソッドってなに？

今回ご紹介するトラバース系のメソッドは、今までのメソッドとは少し異なります。何らかの処理を加える、という訳ではなく、セレクタで指定した要素を基準にして、さらにそこから要素を検索して指定するためのメソッドになります。

「さらにそこから要素を検索して指定」となると多少混乱することと思います。また、それならば初めからセレクタで指定してしまえばいいような気がしますが、実際にjQueryのコーディングをしてみると、これらのトラバース系メソッドは、とても便利で使い勝手の良いメソッドになります。

トラバースとは、横断するという意味になります。HTML内の要素を横断的に検索して、柔軟に要素を指定するためのメソッドです。今後jQueryでコーディングを行っていこうと思っている方には、ぜひ覚えて頂きたいメソッドです。

ひとつ前の要素を取得するprev()メソッド

prev()メソッドは、セレクタで指定した要素の、ひとつ前の兄要素を取得するメソッドです。

下記サンプルコードと表示サンプルを見比べると、サンプルのHTMLソースでは、３番目のli要素にidが記述されています。

サンプルソース<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#third”).prev().addClass(“icon”);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li>HTML</li>
<li>CSS</li>
<li id=”third”>jQuery</li>
</ul>
・・省略・・
</body>
</html>

HTML
★CSS
jQuery

セレクタでは３番目のli要素を指定していますが、prev()メソッドによって、ひとつ前のli要素を取得し、addClass()メソッドでクラスを追加しています。

ひとつ後ろの要素を取得するnext()メソッド

next()メソッドは、prev()メソッドの反対で、ひとつ後ろの弟要素を取得するメソッドです。
下記サンプルのHTMLソースでは、２番目のli要素にidを記述しています。

サンプルソース2<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#second”).next().addClass(“icon”);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li>HTML</li>
<li id=”second”>CSS</li>
<li>jQuery</li>
</ul>
・・省略・・
</body>
</html>

HTML
CSS
★jQuery

セレクタでは２番目のli要素を指定していますが、next()メソッドによって、３番目のli要素が対象となっています。

前の兄要素を全て取得するprevAll()メソッド

prev()メソッドは、ひとつ前の兄要素を取得するだけでしたが、prevAll()メソッドを使うと、前に記述されている兄要素を全て取得することができます。

サンプルソース3<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#third”).prevAll().addClass(“icon”);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li>HTML</li>
<li>CSS</li>
<li id=”third”>jQuery</li>
</ul>
・・省略・・
</body>
</html>

★HTML
★CSS
jQuery

セレクタでは３番目のli要素を指定していますが、それより前の兄要素である2つのli要素が取得できることとなります。

後ろの弟要素を全て取得するprevAll()メソッド

nextAll()メソッドは、prevAll()メソッドの反対になります。後ろに記述されているすべての弟要素を取得します。

サンプルソース4<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#first”).nextAll().addClass(“icon”);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li id=”first”>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
・・省略・・
</body>
</html>

HTML
★CSS
★jQuery

セレクタでは１番目のli要素を指定していますが、２番目以降の弟要素であるli要素がすべて取得できています。

prevAll()、nextAll()は、セレクタを指定することもできる！

prevAll()やnextAll()は、前や後ろの要素全てを取得することができますが、セレクタを指定することで、特定の要素のみを取得できるようになります。下記のサンプルでは、prevAll(“dt”)として、兄要素にあたるdt要素のみ（dd要素は除く）を取得しています。

サンプルソース5<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#point”).prevAll(“dt”).addClass(“icon”);
});
</script>
</head>
<body>
・・省略・・
<dl>
<dt”>HTML</dt>
<dd”>Hypertext Markup Languageの略。</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheetsの略。</dd>
<dt id=”point”>jQuery</dt>
<dd>JavaScriptのライブラリのひとつです。</dd>
</dl>
・・省略・・
</body>
</html>