jQueryのindex()で順番を取得する

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

スポンサードリンク

要素の順番を取得するindex()の使い方をご説明します。

タブメニューなどでクリックした順番を取得したりと、便利に使う方法もお伝えします。

基本的な使い方

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

構文

$(‘セレクタ’).index();

これだけで指定したセレクタの順番を取得できます。

該当がなければ-1を返すので、if文などでの条件分岐にも使えますね。

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

まずはクリックした要素の順番を取得して、コンソールに表示させてみましょう。

HTML

jQuery

結果

0

最初の<li>要素の順番0がコンソールに表示されました。

指定した要素が複数ある場合は、最初に該当した順番が取得されます。

0から数えるため、一番最初の0が取得されました。

しかしこれでは指定した要素が複数あった場合、取得したい順番が取得できないこともあるでしょう。

以下のようにすれば特定の要素の順番が取得できます。

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

引数を指定して順番を取得

以下のようにIDを付け、そのIDを引数で指定すれば、取得したい要素の順番が取得できます。

HTML

jQuery

結果

2

<li>要素の中から、特定のIDが付いた要素が何番目かを取得しました。

上記では<li>要素全体の中でkantoのIDが付いた<li>要素は3番目なので2とコンソールに表示されました。

セレクタに指定して順番を取得

上記とは逆ですが、セレクタにIDを付け、要素を引数で指定しても、取得したい要素の順番が取得できます。

 jQuery

結果

2

先ほどとはセレクタと引数の値が逆ですが、同様に順番を取得できます。

さまざまな使い方

クリックした要素の順番を取得

クリックした要素が、セレクタで指定した要素の何番目かを取得し、HTMLに表示させます。

HTML

jQuery

結果(動作サンプル)

以下、地方のテキストをクリックすると順番が表示されるかと思います。

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

番目

北海道をクリックすると0番目、九州をクリックすると7番目と表示されるかと思います。

上記のようにindex()の引数にthisを指定すれば、クリックした要素の順番が取得できます。

参考:text() でHTML要素にテキストを追加

$(this)を使って簡単に取得

以下のように$(this)を使って簡単に順番を取得することもできます。

jQuery

結果(動作サンプル)

以下、地方のテキストをクリックすると順番が表示されるかと思います。

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

番目

$(this)を使っても、先ほどと同様に順番が取得できました。

参考:jQueryの$(this)の使い方

index()でタブメニューを自作

jQueryでタブメニューを作る際はプラグインを使われている方も多いかと思いますが、index()を使えばプラグインなしでも作ることが可能です。

下記の記事でご紹介していますので、是非試してみてください。

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

スポンサードリンク

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

コメントを残す

*