ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年11月15日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

.eq() セレクタ(selector)は、特定のインデックス番号になった要素(element)を選択するために使用されます。 インデックス番号は、0から開始されます。 したがって、最初の要素のインデックス番号は「0」になります。 2番目の要素を選択するには、「.eq(1)」を使用します。 $( "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="클릭">

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

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

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

 



コメントを残す

コメント