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

どうもかわうそです!

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

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

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

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

jQuery | index()の使い方 | 要素の順番を取得 |【動画解説有】
どうも、WEBエンジニアのかわうそ( @kawauso_29)です! 最近は新規ECサイト事業を立ち上げるプロジェクトリーダーなんかをしてます。事業計画~WEBマーケの領域も勉強しまくりです。...
">
jQuery | index()の使い方 | 要素の順番を取得 |【動画解説有】
どうも、WEBエンジニアのかわうそ( @kawauso_29)です! 最近は新規ECサイト事業を立ち上げるプロジェクトリーダーなんかをしてます。事業計画~WEBマーケの領域も勉強しまくりです。...

eq()の使い方

基本の使用方法

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

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

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

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

  • A
  • B
  • C
  • D
  • E

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

なので、結果は

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

出力できました。

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

  • A
  • B
  • C
  • D
  • E

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

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

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

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

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

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

1

2

3

4

5

基本設計として、スライドは非表示、ドットはoffの状態です。そこに以下のクラスを付け外しさせることで、スライド表示とドットのアクティブを連動させています。

[box class=”box3″]dot_activeクラス:ドットの色をonにする[/box]

[box class=”box3″]box_actoveクラス:スライドを表示させる[/box]

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

jQuery②行目、3行目で、ドットをクリックするたびにactiveクラスを全て取り外して初期化します。

④行目で、クリックしたドットの順番を取得しました。

⑤行目で、クリックしたドットの順番と同じスライドをeq()によって指定し、表示

⑥行目で、クリックしたドットをアクティブにしています。

以上、eq()の基本的な使用方法でした!

フォローする