jQuery_jqueryでのindex()メソッドの使用例

この記事の例では、jQuery でのindex() メソッドの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

このメソッドは、一致する要素を検索し、要素のインデックス値を返すことができます。
インデックス値は0から始まります。

文法構造 1:

このメソッドにパラメータがない場合、戻り値は兄弟要素のコレクション内の指定された要素のインデックス位置です。

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

$(selector).index()

コード例:

例 1:

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

<頭>






<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("span").text($(".qian").index());
})
});

• バックステージエリア


• フロントデスクエリア


• データベースエリア


• ウェブマスター コミュニケーション

現在の li 要素の位置:0
クリックして結果を表示

上記のコードは、兄弟要素のセット内のクラス名 qian を持つ li 要素のインデックス値を返すことができます。これを見ると、いわゆる兄弟要素が類似した要素であるかどうかについて疑問が生じるかもしれません。 、li 要素はコレクション内のインデックス値です。

例 2:

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

<頭>






<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("#sou").index());
})
});

• バックステージエリア


• フロントデスクエリア


• データベースエリア


• ウェブマスター コミュニケーション

検索の最適化

現在の li 要素の位置:0

クリックして結果を表示

上記のコードからわかるように、同じ型の要素だけではなく、同じ世代のすべての要素が含まれます。

文法構造 2:

メソッドのパラメータが DOM オブジェクトまたは jQuery オブジェクトの場合、戻り値は、指定された要素コレクション内のこの DOM オブジェクトまたは jQuery オブジェクトのインデックスです。
指定された DOM オブジェクトまたは jQuery オブジェクトが指定された要素コレクション内に見つからない場合、戻り値は -1 です。

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

$(selector).index(element)

パラメータリスト:

参数	描述
element	获得index位置的DOM对象或者jQuery对象。

コード例:

例 1:

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

<頭>






<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("span").text($("li").index(document.getElementById("qian")));
})
})

• バックステージエリア


• フロントデスクエリア


• データベースエリア


• ウェブマスター コミュニケーション

現在の li 要素の位置:0
クリックして結果を表示

例 2:

一致する要素が見つからないため、戻り値は -1 になります。

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

<頭>






<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("li").index(document.getElementById("sou")));
})
});

• バックステージエリア


• フロントデスクエリア


• データベースエリア


• ウェブマスター コミュニケーション

検索の最適化

現在の li 要素の位置:0

クリックして例を表示

文法構造 3:

メソッドのパラメータがセレクターの場合、要素はこのセレクターを通じて取得されたオブジェクトのコレクションから検索されます。

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

$(selector).index(Jqselector)

パラメータリスト:

参数	描述
Jqselector	选择器，将会从通过此选择器获得的对象中查找元素。

コード例:

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

<頭>






<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("#qian").index("li"));
})
});

• バックステージエリア


• フロントデスクエリア


• データベースエリア


• ウェブマスター コミュニケーション

検索の最適化

現在の li 要素の位置:0

クリックして例を表示

上記のコードは、li セレクターを通じて取得された li オブジェクトのコレクション内の id 値 qian を持つ li 要素のインデックス位置を取得します。

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript の実装により、ソース コードを表示するための右クリックと F12 キーの使用が禁止されています_javascript スキル次の記事：JavaScript の実装により、ソース コードを表示するための右クリックと F12 キーの使用が禁止されています_javascript スキル

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル