jquery eqメソッド

TOPページに戻る > jquery入門

jquery eq()メソッド

eqメソッドは、セレクタで指定した要素の内容の指定した番目の要素を指定します
使い方は簡単です。セレクタとメソッドの間に.eq(index番号)を記述するだけです
0番目が最初のindex番号です。配列は0、1、2、3と数えます。.eq(2)と指定すると3番目の要素が指定されます

eq(index番号)

指定したHTML要素の内容の指定したインデックス番号の要素を指定します

ボタンをクリックしたときにセレクタで指定したHTML要素の内容になっている2番目の要素のテキストが変更されます。今回はid名がhogeの子要素の中で2番目のdiv要素を指定しました

jquery

$(function() {
	$("button").click(function(){
	$("#hoge div").eq(1).text("この要素を指定しました");
	});
});

css

#hoge{
 border: solid 1px;
 padding: 5px;
  }
#hoge div{
 border: solid 1px;
  }

html

<button>ボタン</button>
<div id="hoge">セレクタで指定された要素
<div>子要素。まだ指定されていません</div>
<div>子要素。まだ指定されていません</div>
<div>子要素。まだ指定されていません</div>
</div>

サンプル

ボタン