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

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

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

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

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

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

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

基本の使用方法

$(要素).index();

1	$(要素).index();

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

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

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

<ul>
   <li>A</li>
   <li id="num2">B</li>
　 <li>C</li>
</ul>

<ul>

</ul>

$(function() { 
  var i = $('#num2').index();
  console.log(i);
});

$(function() {

var i = $('#num2').index();

console.log(i);

});

1

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

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

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

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

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

<div class="box">
   <p>A</p>
   <p>B</p>
   <p>C</p>
   <ul class="box-list">
     <li>D</li>
     <li id="e">E</li>
   </ul>
   <div id="f">F</div>
 </div>

</ul>

</div>

$(function() { 
  var i = $('#f').index();
  console.log(i);
});

$(function() {

var i = $('#f').index();

console.log(i);

});

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

なので、結果は

4

が取得できました。

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

$(function() { 
  var i = $('#e').index();
  console.log(i);
});

$(function() {

var i = $('#e').index();

console.log(i);

});

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

1

が取得できました。

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

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

$('セレクタ').index(指定した要素);

1	$('セレクタ').index(指定した要素);

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

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

<ul id="list1">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
  </ul>
  <ul id="list2">
    <li>1</li>
    <li>2</li>
    <li id="num3">3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

</ul>

</ul>

$(function() { 
  var i = $('#num3').index('li');
  console.log(i);
});

$(function() {

var i = $('#num3').index('li');

console.log(i);

});

8

が返ってきますね。

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

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

$(function() { 
  var i = $('#num3').index();
  console.log(i);
});

$(function() {

var i = $('#num3').index();

console.log(i);

});

2

が返ってくるはずです。

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

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

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

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

$(this)と組み合わせる

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

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

マウスオーバーイベント

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

ここに順番が表示されます

$(function() { 
    $('#list1 li').on('mouseover',function(){
      var i = $(this).index();
      $('#text').text(i);
    });
  });

$(function() {

$('#list1 li').on('mouseover',function(){

var i = $(this).index();

$('#text').text(i);

});

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

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

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

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

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

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

　<div id="samp-box">
    <p class="box_active">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div>
  <div id="samp-dot">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>

</div>

<p></p>

</div>

  $('#samp-dot p').click(function(){
      $('#samp-dot p').removeClass('dot_active');
      $('#samp-box p').removeClass('box_active');
      var dot_i = $(this).index();
      $('#samp-box p').eq(dot_i).addClass('box_active');
      $(this).addClass('dot_active');
    });
  });