jQueryコレクションを走査する方法

jQuery は、HTML ドキュメントと DOM 要素の操作をよりシンプル、高速、そして保守しやすくする人気の JavaScript ライブラリです。そのセレクターと操作メソッドにより、開発者はページ上の要素に素早くアクセスして操作できるため、開発効率が向上します。開発では、属性の変更、ノードの追加または削除など、ページ上の要素のバッチを処理する必要があることがよくあります。このとき、jQuery コレクション トラバーサルを使用してバッチ操作を実装する必要があります。では、jQuery コレクションをどのように走査するのでしょうか?

jQuery コレクションは、さまざまなセレクターを通じて取得できる DOM 要素オブジェクトで構成される配列です。次のように:

var $list = $('ul li'); // 获取所有ul下的li元素

jQuery オブジェクトを取得した後、jQuery が提供するいくつかのメソッドを使用してコレクションを走査し、必要な効果を実現できます。一般的に使用される jQuery コレクションのトラバーサル メソッドの一部を次に示します。

1. each()

each() メソッドが使用されます。配列またはオブジェクトを走査するには、上記で取得した $list コレクションを反復し、各要素に対して指定された関数を実行します。

構文:

$.each(array, function(index, value) {
  // 处理函数体
});

サンプルコード:

$list.each(function(index) {
  console.log(index + ": " + $(this).text());
});

このうち、each() メソッドのパラメータは関数となっており、これを使用します。 in each() メソッド内で走査される各要素に対して実行されます。この関数は 2 つのパラメータを提供します:

• #index: 現在の要素のインデックス。
• value: 現在の要素の値。

2. map()

map() メソッドは、配列を走査するためにも使用できます。関数の実行後、配列を別の配列に変換し、新しい配列を返します。

構文:

$.map(array, function(value, indexOrkey) {
  // 处理函数体
});

サンプルコード:

var newArr = $list.map(function(index) {
  return $(this).text();
});
console.log(newArr);

3. filter()

filter () メソッドは、指定された条件を満たすコレクション内の要素をフィルターするために使用されます。コールバック関数によって返された値に基づいて、新しいコレクションに要素を含めるかどうかを決定できます。

構文:

$(selector).filter(function(index){
  // 处理函数体
});

サンプル コード:

var $filtered = $list.filter(function(index) {
  return $(this).hasClass('active');
});
console.log($filtered);

filter()メソッドは、条件を満たす要素を返します。これらの要素は同じであってもかまいません元のコレクションとして、同じオブジェクト内の要素、または新しい jQuery オブジェクトにすることもできます。

4. #not()

not() メソッドは、コレクション内の指定された要素を除外し、次の値を返します。指定された要素の新しいコレクションが含まれていません。

構文:

$(selector).not(selector);

サンプル コード:

var $notFiltered = $list.not('.disabled');
console.log($notFiltered);

not()メソッドは、関数をパラメータとして受け入れることもでき、その関数は実行されます。 each 要素上で、戻り値が true の場合、その要素は新しいコレクションに含まれます。

var $notFiltered = $list.not(function(index) {
  return $(this).hasClass('active');
});
console.log($notFiltered);

5. find()

find() メソッドは、現在のコレクション内のすべての子孫要素をフィルターし、指定された一致を返します。セレクターの要素のコレクション。

構文:

$(selector).find(selector);

サンプル コード:

var $found = $list.find('a');
console.log($found);

これらの例では、jQuery がコレクションを反復処理するための複数のメソッドを提供しており、これにより jQuery コレクションの処理が容易になることがわかります。 . 、コードの記述がより簡単になります。これらのメソッドは Array.prototype および Object.prototype から継承されているため、jQuery ではネイティブ JavaScript と同じように動作します。したがって、これらをマスターすると、jQuery でコレクションを操作できるだけでなく、それらを使用してネイティブ JavaScript で操作することもできます。

以上がjQueryコレクションを走査する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。