特定の要素にのみ処理をさせたり、順番を取得する際に便利なeq()メソッドはいろいろな場面で使うことになるでしょう。
基本的な使い方はもちろん、最後から数える方法や、複数の要素を取得したり、変数化した順番を指定したりとさまざまな使い方をご紹介します。
よく使うメソッドですので、これを機に使いこなせるようになりましょう。
目次
基本的な使い方
指定した順番の要素を取得します。
構文
$( ‘li’ ).eq( 0から始まる指定したい順番 ).指定の要素に処理するメソッド;
eq()の引数に0から始まる順番を指定し、該当する要素にのみ.(ドット)で繋いだメソッドで処理します。
いろいろなメソッドと組み合わせることで任意のテキストを取得したり、cssで色を変えたり、要素を削除したりとさまざまな処理が可能です。
指定した要素のテキストをコンソールに表示
各地域の一覧から、指定した順番のテキストのみを表示させてみましょう。
ブラウザに標準で装備されている、コンソールに表示させるサンプルです。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<ul> <li>北海道</li> <li>東北</li> <li>関東</li> <li>東海</li> <li>関西</li> <li>中国</li> <li>四国</li> <li>九州</li> </ul> |
jQuery
|
1 2 3 4 5 6 7 8 9 |
$(function() { // 3番目の<li>要素のテキストを変数に格納 var txt = $('li').eq(2).text(); // 変数の中身をコンソールに表示 console.log(txt); }); |
結果
関東
3番目の<li>要素のテキスト関東がコンソールに表示されました。
説明
各地域を記載した<li>要素が8つあるうちeq()を使って指定した順番のテキストのみを表示させました。
eq(2)なのに3番目なのはeq()は0から数えるからです。
eq(2)に続くtext()で3番目のテキストを取得しています。
最後から数えて指定した要素を削除
各地域の一覧の最後から数えて指定することもできます。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<ul> <li>北海道</li> <li>東北</li> <li>関東</li> <li>東海</li> <li>関西</li> <li>中国</li> <li>四国</li> <li>九州</li> </ul> |
jQuery
|
1 2 3 4 5 6 7 8 9 |
$(function() { // 一番最後の<li>要素のテキストを変数に格納 var txt = $('li').eq(-1).remove(); // 変数の中身をコンソールに表示 console.log(txt); }); |
結果
北海道
東北
関東
東海
関西
中国
四国
最後から1番目、つまり一番最後の<li>要素九州が削除されました。
eq()の引数に-(マイナス)を付けた負の整数を指定すると、最後から数えてくれます。
注意
-(マイナス)は1から数えます。-0としても通常の0と変わらず最初の北海道が指定されるため、一番最後は-1を指定しましょう。- セレクタに指定する
:eq()で-(マイナス)を使った指定方法はjQuery1.8からサポートされました。jQuery1.7以前では動作しません。
セレクタで順番を指定
eq()はcssのようにセレクタで指定することもできます。
jQuery
|
1 2 |
// セレクタに:(コロン)を挟んでeq(2)を指定 $('li:eq(2)').text(); |
セレクタで指定する方法でも先ほどと同様の動作になりますが、cssにはないjQuery拡張の方法となるためパフォーマンスが悪くなるようです。
特別な理由がなければ上記のような方法で使うほうが良いでしょう。
さまざまな使い方
複数の要素をコンソールに一覧表示
eq()を使えば、複数の要素を一気に順番通り表示させることもできます。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<ul> <li>北海道</li> <li>東北</li> <li>関東</li> <li>東海</li> <li>関西</li> <li>中国</li> <li>四国</li> <li>九州</li> </ul> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function() { // ①対象の<li>要素の数をカウントし変数に格納 var len = $('li').length; // ②要素の数だけループ処理 for (var i=0; i<len; i++) { // ③対象の<li>要素のテキストを変数に格納 var txt = $('li').eq(i).text(); // ④変数の中身をコンソールに表示 console.log(txt); } }); |
結果
北海道
東北
関東
東海
関西
中国
四国
九州
コンソールに上記のように表示されます。
説明
以下のように動作しています。
①一覧表示したい要素の数をカウント
セレクタに.lengthを繋ぐと、セレクタで指定した要素が何個あるかをカウントできます。
以下for()でカウントしながらループすることもできますが、その分パフォーマンスが低下するため、このようにあらかじめカウントしておきましょう。
②for文で要素の数だけループ処理
以下③、④の動作を要素の数だけ繰り返し処理します。
参考：for文で繰り返し処理
③④指定した要素のテキストを取得しコンソールに表示
<li>要素のテキストをeq(i)で順番を指定しながら取得し、コンソールに表示しています。
iには順番を示す番号が格納されていますので、ループしながらeq(0)eq(1)…と進んでいきます。
eq()は以下のようになります。
eq(0)=> 北海道eq(1)=> 東北eq(2)=> 関東eq(3)=> 東海eq(4)=> 関西eq(5)=> 中国eq(6)=> 四国eq(7)=> 九州
フォームのセレクトボックスの値を取得したり、複数のフォームから値を取得する方法も以下でご紹介しています。
参考：複数のフォームから取得
参考：セレクトボックスの値を全て取得
変数に代入した順番を指定
上記のように順番を変数に代入することもできますが、セレクタでeq()を使う方は注意が必要です。
動作しない
以下のようにeq()の引数にそのまま変数を指定しても動作しません。
|
1 |
var txt = $('li:eq(i)').text(); |
セレクタは''(クオーテーション)で囲われており、その中にiという文字を入れたため、変数ではなく単なる文字列として扱われてしまったのです。
以下のように変数として扱わせる必要があります。
動作する
以下のように+(プラス)で連結し、変数を''(クオーテーション)の外に出してやれば、きちんと動作するでしょう。
|
1 |
var txt = $('li:eq('+i+')').text(); |
いずれにしても、セレクタに指定する方法はあまりオススメできませんが、もしセレクタにeq()を使う場合は注意しましょう。
eq()を使ってタブメニューを作る
jQueryプラグインではよく見かけるタブメニューですが、eq()を使えば自作することも可能です。
プラグインに頼りたくない方は是非チェックしてみましょう。
以下の記事でご紹介しています。
