横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
検証ツールの支援と多岐にわたるソリューションを提供します。
jQueryで:evenフィルター(セレクター)を操作します。
jQueryでは、HTML(XHTML、HTML5)の各要素をフィルターで検索(セレクター)表現し、操作する。
:evenフィルター |
指定した要素の偶数番目(even)の要素を選択する。 書式; $("要素名:even") |
---|
動作の説明
ボタン【:even(赤色)】(#btn_11131)をクリック(.click(function(){)すると、
jQueryのスクリプト $("dd:even").css("color","red"); を実行する。
処理; セレクターの偶数番目(dd:even)のcssの
colorプロパティの値(.css("color","red"))を変更する。
1行目、3行目、5行目のテキストが赤色となる。
特記; JavaScript言語では数字を0から数え、最初の要素(1行目)は1ではなく0となります。
偶数番目(0番目、2番目、4番目)は1行目、3行目、5行目になります。
jQueryの書き方 |
/*------------------------------------ */ // 11-13) even フィルター(セレクター) /*------------------------------------ */ //.click() イベント $("#btn_11131").click(function(){ $("dd:even").css("color","red"); /* 1,3,5行目赤色 */ }); $("#btn_11132").click(function(){ $("dd:even").css("color","blue"); /* 1,3,5行目青色 */ }); $("#btn_11133").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_11131" class="btnStd_170 Gray">:even(赤色)</button> <button id="btn_11132" class="btnStd_170 Gray">:even(青色)</button> <button id="btn_11133" class="btnStd_170 Gray">要素セレクター (クリア)</button> |