jQuery: eq() セレクターの使用例 example_jquery

この記事の例では、jQuery での:eq() セレクターの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

このセレクターは、指定されたインデックス値を持つ要素と一致します。
要素の位置インデックスは 0 から始まります。

文法構造:

コードをコピー コードは次のとおりです:

$(":eq(index)")

このセレクターは通常、クラス セレクター、要素セレクターなどの他のセレクターと組み合わせて使用​​されます。例:

コードをコピー コードは次のとおりです:

$("li:eq(1)").css("色」、「緑」)

上記のコードは、li 要素コレクション内のインデックス 1 の li (つまり、2 番目の li) のフォントの色を緑色に設定します。

他のセレクターで使用しない場合、デフォルトの状態は * セレクターで使用されます。たとえば、$(":eq()") は $("*:eq()") と同等です。

パラメータリスト:

参数	描述
index	给定的索引值。

コード例:

例 1:

コードをコピーします コードは次のとおりです:

<頭>




<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("li:eq(1)").css("color","blue");
});
});

• html エリア


• div CSS エリア


• jQuery ゾーン


• JavaScript ゾーン

クリックして効果を確認してください

上記のコードは、li 要素コレクション内のインデックス値 1 の li 要素のフォントの色を緑に設定できます。インデックス値は 0 から始まるため、上記のコードは 2 番目の li のフォントの色を緑に設定します。 。

例 2:

コードをコピーします コードは次のとおりです:

<頭>




<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(":eq(10)").css("color","blue");
});
});

• html エリア


• div CSS エリア


• jQuery ゾーン


• JavaScript ゾーン

スクリプト ハウスはあなたを歓迎します

太陽が出ています

クリックして効果を確認してください

上記のコードでは、:eq() セレクターで使用されるセレクターが指定されていないため、デフォルトで * セレクターで使用されます。これはすべての要素に一致するため、インデックス値 10 の要素は一致します。フォントの色は緑色に設定されています。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。