jQuery複数要素から、任意の場所の取得！
今回は、jQueryで複数要素から、任意の場所の要素を取得する方法を記載してみます。
「親要素や子要素ってjQueryでどう指定するの？」や「祖先にさかのぼって指定ってできるの？」などの疑問に対して、分かりやすくサンプルコードを用いて詳しく記載してみようと思います。
という事で、それでは今回はッ、
- ・親要素を取得するparent()メソッド
- ・子要素を取得するchildren()メソッド
- ・祖先にさかのぼって取得するperents()メソッド
- ・子孫要素を取得するfind()メソッド
- ・１番最初の要素/最後の要素first()/last()メソッド
- ・n番目の要素を取得するeq()メソッド
上記について記載していこうと思います…。
親要素を取得するparent()メソッド
parent()メソッドは、指定したセレクタの親要素を取得するメソッドです。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#first”).parent().css(“background”,”#4c5482″);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li id=”first”>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
・・省略・・
</body>
</html>
- HTML
- CSS
- jQuery
セレクタではli要素である#firstを取得していますが、parent()メソッドによって、親要素であるul要素の背景が紺色（#4c5482）になっています。
子要素を取得するchildren()メソッド
children()メソッドは、parent()メソッドの反対で、子要素を取得するメソッドです。子要素には複数の要素がある可能性があるので、パラメータにセレクタを指定することで、さらに絞り込むことができます。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#first”).children(“.even”).addClass(“icon”);
});
</script>
</head>
<body>
・・省略・・
<ul id=”first”>
<li class=”odd”>HTML</li>
<li class=”even”>CSS</li>
<li class=”odd”>jQuery</li>
</ul>
・・省略・・
</body>
</html>
- HTML
- ★CSS
- jQuery
上記サンプルでは、children(“.even”)として、クラスevenの子要素を取得しています。
祖先にさかのぼって取得するperents()メソッド
上記で紹介したparent()メソッドは、親要素を取得するメソッドでした。複数形のparents()メソッドでは、祖先要素を取得することができます。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#first”).parents(“.outer”).css(“background”,”#4c5482″);
});
</script>
</head>
<body>
・・省略・・
<div class=”outer”>
<ul>
<li id=”first”>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
</div>
・・省略・・
</body>
</html>
- HTML
- CSS
- jQuery
まずセレクタで指定している#firstというli要素には、ul要素、div.outerなど、いくつかの祖先要素があります。それら祖先の中から、パラメータで指定した要素を取得することができます。上記のサンプルでは、.outerというクラスの付いた要素を取得し、背景を紺（#4c5482）にしています。
子孫要素を取得するfind()メソッド
find()メソッドはparents()メソッドの逆です。子孫要素を取得するメソッドです。find()メソッドには、必ずパラメータを指定します。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#first”).find(“a”).addClass(“icon”);
});
</script>
</head>
<body>
・・省略・・
<ul id=”first”>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>jQuery</a></li>
</ul>
・・省略・・
</body>
</html>
- ★HTML
- ★CSS
- ★jQuery
ul要素の子孫にあたるa要素を取得して、クラス「icon」を付けてみました。
１番最初の要素/最後の要素first()/last()メソッド
first()/last()メソッドは、それぞれ１番最初の要素、最後の要素を取得するメソッドです。たくさんある要素の中から、最初または最後のひとつを指定するときに便利なメソッドです。パラメータは指定することができません。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list li”).first().addClass(“icon”);
$(“#list li”).last().addClass(“icon”);
});
</script>
</head>
<body>
・・省略・・
<ul id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
・・省略・・
</body>
</html>
- ★HTML
- CSS
- ★jQuery
上記サンプルでは、最初と最後のリストが指定された状態になります。
n番目の要素を取得するeq()メソッド
eq()メソッドは、何番目の要素かを番号で指定して取得することができるメソッドです。例えば２番目の要素ならeq(1)、３番目の要素ならeq(2)と記述します。少し混乱しそうですが、プログラムの世界では、数を０（ゼロ）から数えることが多くなります。この場合も「０」が１番目「1」が２番目になります。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list li”).eq(1).addClass(“icon”);
});
</script>
</head>
<body>
・・省略・・
<ul id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
・・省略・・
</body>
</html>
- HTML
- ★CSS
- jQuery
上記サンプルでは、eq(1)として、２番目のli要素を取得しています。また、パラメータに「-」（マイナス）の値を入れると、下から何番目という指定ができます。ただしこの場合は、-1から数え、-1が一番下、-2が下から２番目となります。
という事で今回は、jQueryで複数要素から、任意の場所の要素を取得する方法について、サンプルコードを交え記載してみました。
今回の内容で、要素の指定方法が大幅に広がったことと思います。個人的には、ここまで要素の指定を複雑に指定することは少ないですが、jQueryのプラグインなどであるスライダーを多少、カスタマイズしようとプログラムコードを見てみますと、結構な頻度で複雑に要素を指定してある場合が、多々ございます。
しっかりと理解して、単純に要素を指定できない場合などには、とても便利で重宝する記述方法になることと思います。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
