第二のタグにCSSを設定する[jQueryの例]

Last Updated:2023年07月17日| コメントを残す

$("div").eq(n).css()を使用して "n-1"番目の要素のCSSスタイルを設定します。

.eq() セレクタは、特定のインデックス番号の要素を選択するために使用されます。 インデックス番号は0から始まります。 したがって、最初の要素のインデックス番号は「0」になります。 1番目の要素を選択するには、「.eq(XNUMX)」を使用します。 $("div").eq(n)$("div:eq(n)")としても使用が可能です。

jQueryスクリプトの例:

$("input").click(function(){
$("div").eq(1).css
({"background-color":"blue","font-style":"italic"});
});

HTML 例:

<div>첫 번째 문장입니다.</div>
<div>두 번째 문장입니다.</div>
<div>세 번째 문장입니다.</div>
<input type="button" value="클릭">

上記の例を実行すると、ボタンを押すとXNUMX番目の文のスタイルが変わります。 (デモ)

:eq() セレクタの代わりに :nth-​​of-type() セレクタを使用しても同じ結果が得られます。 上記のサンプルjQueryスクリプトは、次のように使用することもできます。

$("input").click(function(){
$("div:nth-of-type(2)").css
({"background-color":"blue","font-style":"italic","color":"white"});
});

 


コメントを残す

コメント