jQueryのeq()で順番を指定する方法

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

特定の要素にのみ処理をさせたり、順番を取得する際に便利なeq()メソッドはいろいろな場面で使うことになるでしょう。

基本的な使い方はもちろん、最後から数える方法や、複数の要素を取得したり、変数化した順番を指定したりとさまざまな使い方をご紹介します。

よく使うメソッドですので、これを機に使いこなせるようになりましょう。

 

基本的な使い方

指定した順番の要素を取得します。

構文

$( ‘li’ ).eq( 0から始まる指定したい順番 ).指定の要素に処理するメソッド;

eq()の引数に0から始まる順番を指定し、該当する要素にのみ.(ドット)で繋いだメソッドで処理します。

いろいろなメソッドと組み合わせることで任意のテキストを取得したり、cssで色を変えたり、要素を削除したりとさまざまな処理が可能です。

指定した要素のテキストをコンソールに表示

各地域の一覧から、指定した順番のテキストのみを表示させてみましょう。

ブラウザに標準で装備されている、コンソールに表示させるサンプルです。

HTML

jQuery

結果

関東

3番目の<li>要素のテキスト関東がコンソールに表示されました。

説明

各地域を記載した<li>要素が8つあるうちeq()を使って指定した順番のテキストのみを表示させました。

eq(2)なのに3番目なのはeq()0から数えるからです。

eq(2)に続くtext()で3番目のテキストを取得しています。

参考:jQueryでコンソールログを使ったデバッグ方法

最後から数えて指定した要素を削除

各地域の一覧の最後から数えて指定することもできます。

HTML

jQuery

結果

北海道
東北
関東
東海
関西
中国
四国

最後から1番目、つまり一番最後の<li>要素九州が削除されました。

eq()の引数に-(マイナス)を付けた負の整数を指定すると、最後から数えてくれます。

注意

  • -(マイナス)は1から数えます。-0としても通常の0と変わらず最初の北海道が指定されるため、一番最後は-1を指定しましょう。
  • セレクタに指定する:eq()-(マイナス)を使った指定方法はjQuery1.8からサポートされました。jQuery1.7以前では動作しません。

セレクタで順番を指定

eq()はcssのようにセレクタで指定することもできます。

jQuery

セレクタで指定する方法でも先ほどと同様の動作になりますが、cssにはないjQuery拡張の方法となるためパフォーマンスが悪くなるようです。

特別な理由がなければ上記のような方法で使うほうが良いでしょう。

さまざまな使い方

複数の要素をコンソールに一覧表示

eq()を使えば、複数の要素を一気に順番通り表示させることもできます。

HTML

jQuery

結果

北海道
東北
関東
東海
関西
中国
四国
九州

コンソールに上記のように表示されます。

説明

以下のように動作しています。

①一覧表示したい要素の数をカウント

セレクタに.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()の引数にそのまま変数を指定しても動作しません。

セレクタは''(クオーテーション)で囲われており、その中にiという文字を入れたため、変数ではなく単なる文字列として扱われてしまったのです。

以下のように変数として扱わせる必要があります。

動作する

以下のように+(プラス)で連結し、変数を''(クオーテーション)の外に出してやれば、きちんと動作するでしょう。

いずれにしても、セレクタに指定する方法はあまりオススメできませんが、もしセレクタにeq()を使う場合は注意しましょう。

eq()を使ってタブメニューを作る

jQueryプラグインではよく見かけるタブメニューですが、eq()を使えば自作することも可能です。

プラグインに頼りたくない方は是非チェックしてみましょう。

以下の記事でご紹介しています。

参考:jQueryでタブメニューを簡単に自作する2つの方法

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*