jQuery の each() メソッドを使用して、同じクラスの HTML 要素を反復処理する方法-jsチュートリアル-php.cn

jQuery の each() メソッドを使用して、同じクラスの HTML 要素を反復処理する方法

DDD

リリース： 2024-10-19 20:45:02

オリジナル

439 人が閲覧しました

How to Iterate Through HTML Elements with the Same Class Using jQuery's each() Method?

jQuery を使用した同じクラスの HTML 要素のループ

同じクラスの一連の HTML 要素を効率的に走査するために、jQuery はeach() メソッド。このメソッドは、DOM 要素の便利な反復ソリューションとして機能します。

each() の使用法を示すために、次のシナリオを検討してください。

複数の

があるとします。 Web ページ上の要素には、それぞれ「証言」クラスが割り当てられます。 jQuery を使用してこれらの要素を 1 つずつ反復処理し、各要素に基づいて特定のアクションを実行する必要があります。

これを実現するための jQuery コードは簡単です。

$('.testimonial').each(function(i, obj) {
  // Perform your actions here
});

ログイン後にコピー

各要素内( ) 関数では、最初のパラメーター (「i」) はクラス「testimonial」を持つ要素の配列内の現在の要素の位置を表し、2 番目のパラメーター (「obj」) は現在の要素の DOM オブジェクトを表します。要素を操作するには、jQuery ラッパー $(this) を利用できます。

たとえば、各要素に特定の条件が当てはまるかどうかを確認したい場合は、それぞれの要素内に if ステートメントを追加できます。 () function:

$('.testimonial').each(function(i, obj) {
  if ($(this).hasClass('active')) {
    // Perform actions for elements with class 'active'
  }
});

ログイン後にコピー

jQuery API ドキュメントには、 each() メソッドに関する包括的な情報が記載されています。詳細なガイダンスと例については、公式ドキュメントを参照してください。

以上がjQuery の each() メソッドを使用して、同じクラスの HTML 要素を反復処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。