copyright

株式会社アイネックスはソフトウェアの開発、検証ツールの支援企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
検証ツールの支援と多岐にわたるソリューションを提供します。

jQuery

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

ｊQueryで：eqフィルター(セレクター)を操作します。
 ｊQueryでは、ＨＴＭＬ（XHTML、ＨＴＭＬ５）の各要素をフィルターで検索（セレクター）表現し、操作する。

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

書式；　$("要素名：eq(番号)")

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

　

動作の説明
ボタン【：eq（2） （赤色）】（#btn_11151）をクリック（.click(function()）すると、
ｊQueryのスクリプト　$("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",""); /* 要素セレクターでクリア */
});
ｃｓｓの書き方 ----------------------
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行目のテキスト