株式会社アイネックスはソフトウェアの開発、データ復旧サービス、ホームページの作成ツール企業です。

横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
    データ復旧サービス、ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

11-15) :eq フィルター(セレクター)

jQueryで:eqフィルター(セレクター)を操作します。
jQueryでは、HTML(XHTML、HTML5)の各要素をフィルターで検索(セレクター)表現し、操作する。

:eqフィルター
指定した番号の要素(equal)を選択する。

書式; $("要素名:eq(番号)")

11-15) 2. :eqフィルター(セレクタ)の操作説明

 

動作の説明
ボタン【:eq(2) (赤色)】(#btn_11151)をクリック(.click(function())すると、
jQueryのスクリプト $("dd:eq(2)").css("color","red"); を実行する。

処理; セレクターの番号(dd:eq(2))のcssの
     colorプロパティの値(.css("color","red"))を変更する。
     3行目のテキストが赤色となる。

特記; JavaScript言語では数字を0から数え、最初の要素(1行目)は1ではなく0となります。
     2番目は3行目になります。

jQueryの書き方 /*------------------------------------ */
// 11-15)  eq(2) フィルター(セレクター)
/*------------------------------------ */
//.click() イベント
$("#btn_11151").click(function(){
  $("dd:eq(2)").css("color","red"); /* 3行目赤色 */
});
$("#btn_11152").click(function(){
  $("dd:eq(2)").css("color","blue"); /* 3行目青色 */
});
$("#btn_11153").click(function(){
  $("dd").css("color",""); /* 要素セレクターでクリア */
});
cssの書き方 ----------------------
HTMLの書き方 <dl>
  <dd>1行目のテキスト</dd>
  <dd>2行目のテキスト</dd>
  <dd>3行目のテキスト</dd>
  <dd>4行目のテキスト</dd>
  <dd>5行目のテキスト</dd>
</dl>
<button id="btn_11151" class="btnStd_170 Gray">:eq(2) (赤色)</button> 
<button id="btn_11152" class="btnStd_170 Gray">:eq(2) (青色)</button> 
<button id="btn_11153" class="btnStd_170 Gray">要素セレクター (クリア)</button> 

1行目のテキスト
2行目のテキスト
3行目のテキスト
4行目のテキスト
5行目のテキスト