jQuery の場合: lt セレクターの使用例 example_jquery-jsチュートリアル-php.cn

jQuery の場合: lt セレクターの使用例 example_jquery

WBOY

リリース： 2016-05-16 16:23:38

オリジナル

1155 人が閲覧しました

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

このセレクターは、指定されたインデックス値未満のすべての要素に一致します。
最小インデックス値は 0 から始まります。

文法構造:

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

$(":lt(index)")

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

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

$("li:lt(3)").css("色"、"青")

上記のコードは、インデックスが 3 未満の li 要素のフォントの色を青に設定できます。
他のセレクターで使用しない場合、デフォルトの状態は * セレクターで使用されます。たとえば、$(":lt") は $("*:lt") と同等です。

パラメータリスト:

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

コード例:

例 1:

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

<頭>

スクリプトホーム

<スクリプトタイプ="text/javascript"> $(document).ready(function(){
$("#btn").click(function(){
$("li:lt(3)").css("色","青"); });
})

html エリア

div CSS エリア

jQuery ゾーン

JavaScript ゾーン

上記のコードは、インデックス値が 3 未満の li 要素コレクションのフォントの色を青に設定できます。

例 2:

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

<頭>

スクリプトホーム

<スクリプトタイプ="text/javascript"> $(document).ready(function(){
$("#btn").click(function(){
$("*").each(function(){
アラート(この.タグ名); }) })
$("#show").click(function(){
$(":lt(11)").css("border","1px 単色赤"); })
});

html エリア

div CSS エリア

jQuery ゾーン

JavaScript ゾーン

上記のコードでは、:lt セレクターで使用されるセレクターが指定されていないため、デフォルトで * セレクターで使用されます。したがって、上記のコードは、インデックス値が小さい現在のドキュメント内のすべての要素を選択できます。 11 より。境界線の色は赤に設定されます。

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