jqueryの反復とは何を意味しますか

尊渡假赌尊渡假赌尊渡假赌
リリース: 2023-05-25 11:25:58
オリジナル
944 人が閲覧しました

jquery の反復はトラバーサルを表し、明示的反復と暗黙的反復に分けられます。違いは、明示的反復、「.each()」メソッドが典型的な明示的反復であり、jQuery メソッドは 1 つずつしか進められないことです。 , jQuery メソッドは、現在の要素を順番に暗黙的に反復操作することで、現在どの要素であるかに関係なく、オブジェクト内の (条件を満たす) すべての要素に対して特定の操作を一度に実行し、一度に完了することができます。

jqueryの反復とは何を意味しますか

このチュートリアルのオペレーティング システム: Windows 10 システム、jQuery3.6.0 バージョン、Dell G3 コンピューター。

jquery の反復はトラバーサルを表し、明示的な反復と暗黙的な反復に分けられます。

明示的な反復とは、特定の jQuery メソッドが 1 つずつしか使用できないことを意味します。 sequence 現在順番にある要素を操作します。

暗黙的な反復とは、特定の jQuery メソッドがオブジェクト内のすべての要素 (条件を満たす) に対して特定の操作を一度に実行でき、オブジェクト内のすべての要素が無意識のうちにすべての要素が実行されることを意味します。一度にすべての操作を実行できるため、現在どの要素が操作されているかが分かりません。
反復の例:

<ul>
<li>foo</li>
<li>bar</li>
</ul>
$( “li” ).addClass( “bar” );
ログイン後にコピー

これは暗黙的な反復です。すべての li 要素がクラス バーで一度に追加されるため、現在どの要素であるかを気にする必要はありません。
この関数ですが、明示的な反復を使用して記述したい場合は、どのように記述すればよいでしょうか?

$( “li” ).each(function() {
$( this ).addClass( “foo” );
});
ログイン後にコピー

li にクラスを 1 つずつ追加することでこの機能を実現できますが、明らかに冗長になるため、お勧めできません。
以下に、明示的な反復を使用してのみ記述できる別の例を示します。 (HTML 部分のコードは上記と同じです)

$( “li” ).each(function( index ) {
console.log( index + “: ” + $( this ).text() );
});
ログイン後にコピー
ログイン後にコピー

.each() メソッドは、典型的な明示的な反復です。反復: まず、セレクターを使用してすべての li 要素を選択し、オブジェクトを形成しました。そのため、オブジェクトは次のようになります (json 形式に似ています): [ { 0: li }, { 1: li } ] 各オブジェクトにも独自のものがあります。多くのプロパティ...

.each() メソッドに戻ります。最初の li 要素がトラバースされると、最初の情報が出力され、2 番目の li 要素がトラバースされると、2 番目の情報が出力されます。

今のコードを振り返ってください:

$( “li” ).each(function( index ) {
console.log( index + “: ” + $( this ).text() );
});
ログイン後にコピー
ログイン後にコピー

index は仮パラメータであり、現在順番にある要素の添字を示します。仮パラメータなのでインデックスは必要なく、i を使用できます。
次に、この関数にパラメータを記述するときに、なぜこのパラメータが添え字を表すのかという疑問が生じます。答えは次のとおりです。メソッドの .each() 関数には 2 つのパラメータがあります。

.each メソッドは次のように記述されます。

$(selector).each(function( index , element ){
//do something
})
ログイン後にコピー

function の最初のパラメータは整数の添字で、2 番目のパラメータは次の目的で使用されます。現在読み込まれている That を返します。要素 (先ほどのコードなど) 要素はそれぞれの li を返します。したがって、以前と同じコードです。次のように書くこともできます。

$( “li” ).each(function( i,element ) {
console.log($(element));
console.log( i + “: ” + $(element).text() );
});
ログイン後にコピー

要素の代わりに this キーワードを使用できるため、要素を書かないことがあります。 this は element と等しいです。同様に、$(this) と $(element) は同じです。 $() セレクターを使用して this または element 要素を選択した後、jQuery が提供する API を使用してそれらを非常に便利に操作できます。たとえば、text() メソッドを使用して要素のテキスト内容を読み取るか、CSS を使用します。 () スタイルを変更するメソッドなど。

以上がjqueryの反復とは何を意味しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート