jQuery_jqueryでのindex()メソッドの使用例-jsチュートリアル-php.cn

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

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

文法構造 1:

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

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

$(selector).index()

コード例:

例 1:

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

<頭>

index() 関数 - スクリプトホーム

スクリプトホーム

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

バックステージエリア

フロントデスクエリア

データベースエリア

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

現在の li 要素の位置:0

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

例 2:

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

<頭>

index() 関数 - スクリプトホーム

スクリプトホーム

<スクリプトタイプ="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:

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

<頭>

index() 関数 - スクリプトホーム

スクリプトホーム

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

バックステージエリア

フロントデスクエリア

データベースエリア

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

現在の li 要素の位置:0

例 2:

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

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

<頭>

index() 関数 - スクリプトホーム

スクリプトホーム

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

バックステージエリア

フロントデスクエリア

データベースエリア

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

検索の最適化

現在の li 要素の位置:0

文法構造 3:

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

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

$(selector).index(Jqselector)

パラメータリスト:

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

コード例:

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

<頭>

index() 関数 - スクリプトホーム

スクリプトホーム

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