jQuery | eq()の使い方 | 要素の順番を指定できます

どうもかわうそです！

今日は『jQuery | eq()』使い方を説明します。

複数要素の中で、ある特定の要素にだけ命令や処理をしたい！そんな場合に使用するのがeq()です。

便利で使いやすいので、使用頻度は高いです。しっかりマスターしておきましょう。

eq()メソッドと一緒によく使われる、index()メソッドやconsole.log()の使用方法もぜひ学んでみて下さい。

eq()の使い方

基本の使用方法

[box class=”box3″]$(‘要素’).eq(順番);[/box]

eq()で指定した順番の要素やセレクタの順番を取得できます！

[alert title=”注意”]eq()の順番指定は0からスタートします[/alert]

以下を試してみましょう。

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
 </ul>

<ul>

</ul>

$(function() { 
  var i = $('li').eq(1).text();
  console.log(i);
});

$(function() {

var i = $('li').eq(1).text();

console.log(i);

});

2番目のli 要素を指定して、そのテキストを取得し、コンソールに出力しました。

なので、結果は

[box class=”box3″]B[/box]

出力できました。

cssに変更を加えたりもできます。

$(function() { 
  $('li').eq(1).css('color','red');
});

$(function() {

$('li').eq(1).css('color','red');

});

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

index()と組み合わせ簡単なスライドを作ってみる

冒頭で紹介したこちらの記事の中でも同じ内容で紹介しています。

http://kawauso-29.com/web/jquery-index/

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

ドットのクリックとスライドの表示が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');
    });
  });