jQuery | index()の使い方 | 要素の順番を取得 |【動画解説有】

どうも、WEBエンジニアのかわうそ( @kawauso_29)です!

最近は新規ECサイト事業を立ち上げるプロジェクトリーダーなんかをしてます。事業計画~WEBマーケの領域も勉強しまくりです。

今日は『jQuery | index()インデックス 』の使い方を説明します。

指定要素が何番目なのか取得できるので便利です。

↓動画でも解説しています。こちらからどうぞ

jQuery index(インデックスメソッド)の使い方

基本の使用方法

指定要素が 兄弟要素の中で何番目なのか番号を取得する ことができます。

index(インデックスメソッド)の取得は0からスタートするので、注意。

さっそくサンプルコードで確認してみましょう。

#num2は、兄弟要素の中で2番目なので、1が取得され返ってきましたね。

↓画像で説明するとこんな感じ↓

兄弟要素の中で何番目なのか番号を調べるindex
兄弟要素の中で何番目なのか番号を取得

この時、<ul></ul>は親要素にあたり、兄弟要素ではないので注意

もう少しレベルアップしたサンプルを試してみましょう。

f は兄弟要素の中で、A、B、C、box-list、Fと5番目に位置していますね。

なので、結果は

が取得できました。

では、#eの順番はどうなるでしょうか。

兄弟要素の中で、 DとFだけになりますので、

が取得できました。

これが基本の使い方になります!

指定範囲の中で順番を取得する

index()の引数に何も入れない場合は、兄弟要素の中での順番を取得できましたが、引数にセレクタやjQueryオブジェクトを指定すると、指定した要素中で何番目かを調べてくれます。

html中のli要素全部の中で、num3のidを持つliは何番目なのか?調べてみましょう。

が返ってきますね。

処理内容は
htmlの最初からli要素を全て洗い出して、#num3が何番目にあるのかを返す
という実行が行われています。

引数になにもいれなければ、兄弟要素から捜索を始めるので

が返ってくるはずです。

指定した要素が見つからない場合

指定要素がhtml中に見つからなければ『-1 が返ってきます。

この性質を利用して、指定要素がhtml中にあるかないかを調べたり、『-1』や『0以上、0以下』などで、条件分岐に使ったりもできます。

番号ではなく、要素の『数 』 を調べる場合はlength プロパティが便利ですよ

$(this)と組み合わせる

実用的な方法になります。

clickやhover、changeなどイベントと組み合わせてみましょう。

マウスオーバーイベント

指定要素にマウスが乗ったときにindex()を使ってみましょう。

  • A
  • B
  • C
  • D
  • E
  • F
ここに順番が表示されます

これでマウスが乗ったli要素を特定し、その順番が取得できましたね。

ホバーした際のカラー変更は、CSSで制御しています。

次はクリックイベントを使用してみます。

実際に取得した順番を使って、とても簡単なスライド機能を実装してみましょう。

クリックイベントでスライド作成

ドットのクリックとスライドの表示がindex()によって連動します。

1

2

3

4

5

基本設計として、スライドは非表示、ドットはoffの状態です。

そこに以下のクラス(class属性)を付け外しさせることで、スライド表示とドットのアクティブを連動させています。

  • dot_activeクラス:ドットの色をonにする
  • box_activeクラス:スライドを表示させる

簡単に解説だけしておきますね!

  • ②行目、3行目で、ドットをクリックするたびにactiveクラスを全て取り外して初期化します。
  • ④行目で、クリックしたドットの順番を取得しました。
  • ⑤行目で、クリックしたドットの順番と同じスライドをeq()によって指定し、表示
  • ⑥行目で、クリックしたドットをアクティブにしています。

さらに、nextボタンやprevボタンを設置→dotと連動させれば、立派なスライドが完成します!

みなさんもぜひ使ってみてください!

↓もう少し詳しい動画での解説はこちら↓

フォローする