jqueryオブジェクトの各メソッドの使用例を詳しく解説

jQuery オブジェクトでは、各メソッドは単純に委任されます。jQuery オブジェクトを最初のパラメーターとして jQuery の each メソッドに渡します。つまり、jQuery が提供する each メソッドは、パラメーター 1 で提供されるオブジェクトのすべてのサブ要素に対してメソッドを 1 つずつ呼び出します。 each() 関数は、基本的にすべてのフレームワークが提供するツール関数です。 オブジェクトと配列の属性値を走査して処理します。 jQuery と jQuery オブジェクトの両方がこのメソッドを実装します。jQuery オブジェクトの場合、各メソッドは単純に委任されます。つまり、jQuery オブジェクトは jQuery の各メソッドに最初のパラメーターとして渡されます。つまり、jQuery によって提供される各メソッドは、jQuery のすべてのサブ要素です。パラメータ 1 で指定されたオブジェクトは 1 つずつ呼び出されます。 jQuery オブジェクトが提供する each メソッドは、jQuery 内のサブ要素を 1 つずつ呼び出します。

各関数の効果は、パラメータの種類によっては完全に一致しません。

1. オブジェクトを走査する (追加のパラメータを使用)

$.each(Object, function(p1, p2) {    
   this;       //这里的this指向每次遍历中Object的当前属性值
  p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

2. 配列を走査する (追加のパラメータを使用して)

コード

$.each(Array, function(p1, p2){    
  this;       //这里的this指向每次遍历中Array的当前元素
  p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

3. オブジェクトを走査します (追加パラメータなし)

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

$.each(Object, function(name, value) {     
       this;      //this指向当前属性的值
     name;      //name表示Object当前属性的名称
     value;     //value表示Object当前属性的值});

4. 配列を走査します (追加パラメータなし)

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

$.each(Array, function(i, value) {     
      this;      //this指向当前元素
     i;         //i表示Array当前下标
     value;     //value表示Array当前元素});

jQuery の each メソッドの一般的な使用法をいくつか示します:

each( callback)
一致する各要素をコンテキストとして使用して関数を実行します。
これは、渡された関数が実行されるたびに、関数内の this キーワードが異なる DOM 要素 (毎回異なる一致要素) を指すことを意味します。また、関数が実行されるたびに、一致する要素の集合における実行環境としての要素の位置を表す数値（0から始まる整数）が関数にパラメータとして渡されます。 「false」を返すとループが停止します (通常のループで「break」を使用するのと同じです)。次のループにジャンプするには、「true」を返します (通常のループで「Continue」を使用するのと同じです)。
次のコールバックは コールバック関数 で、要素を走査するときに指定する必要がある操作を示します。以下の簡単な例から始めましょう:
2 つの画像を反復処理し、その src 属性を設定します。注: ここでは、これは jQuery オブジェクトではなく DOM オブジェクトを指します。

<img></img/>
$("img").each(function(i){ 
this.src = "test" + i + ".jpg"; 
}); 
结果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

もちろん、jquery では要素を移動するときにカスタマイズされたジャンプが可能です。サンプル コードを参照してください。「return」を使用して、事前に each() ループから抜け出すことができます。
HTML コード:

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

<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>

jQuery コード:

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

$("button").click(function(){
    $("div").each(function(index, domEle){
        $(domEle).css("backgroundColor", "wheat");
        if ($(this).is("#stop")) {
            $("span").text("在div块为#" + index + "的地方停止。");
            return false;
        }
    })
}

each() メソッドは、一致する要素ごとに実行される関数を指定します。

ヒント: false を返すと、ループを早期に停止することができます。
構文
$(selector).each(function(index,element)) パラメータ 説明
function(index,element) 必須。一致する要素ごとに実行する関数を指定します。
•index - セレクターのインデックス位置
•element - 現在の要素 (「this」セレクターを使用することもできます

obj オブジェクトは配列ではありません
このメソッドと 1 の最大の違いは次のとおりです: fn メソッドは戻り値を考慮せずに 1 つずつ処理されます。つまり、fn 関数が false を返した場合でも、obj オブジェクトのすべてのプロパティが fn メソッドによって呼び出されます。渡されたパラメーターは 1 と同様です。特に注意すべきは、各メソッド内の fn の特定の呼び出しです。このメソッドは単純な fn(i,val) または fn(args) の形式をとらず、fn.call(val,i) の形式をとります。 ,val) または fn.apply(obj.args)。これは、独自の fn 実装で、このポインターを直接使用して配列またはオブジェクトのサブ要素を参照できることを意味します。

以上がjqueryオブジェクトの各メソッドの使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。