jQueryでトラバースするにはどうすればよいですか?いくつかのトラバーサル手法の簡単な分析

jQuery でトラバースするにはどうすればよいですか?次の記事では、jQuery オブジェクトをトラバースするいくつかの方法を紹介します。皆さんのお役に立てれば幸いです。

jQuery トラバーサルのいくつかの方法

js トラバーサル メソッドが次のとおりであることは誰もが知っています: for (初期化値; ループ終了条件; ステップ サイズ) 例:

 for (var i = 0; i < 3; i++) {//循环体}

jQuery トラバーサルには次のような使用法があります:

1. jq object.each(callback) または selector. each( callback)#[推奨学習: jQuery ビデオ チュートリアル ]

#コールバックの戻り値については最後に説明します

1.1. コールバック関数はパラメーターを取りません (*注意: パラメーターのないこの種のコールバックは、コレクション内の各要素オブジェクトを取得することしかできませんが、対応するインデックス値を取得することはできません。また、この関数を通じてのみ取得できます) . オブジェクトを取得)

->構文: jquery object.each(function(){});

//html
<ul id="course">
    <li>js</li>
    <li>java</li>
    <li>C++</li>
    <li>jq</li>
</ul>

//实例
$("button").click(function(){
  $("#course li").each(function(){
    alert($(this).html());//jq获取方式
    alert(this.innerHTML);//js获取方式
  });
});

1.2. パラメータ付きのコールバック関数 (*can要素オブジェクトを取得するには、次の 2 つの方法があります)

->構文: jquery object.each(function(index,element){});

index: コレクション内の要素のインデックスです

• element: コレクション内の各要素オブジェクトです
• this: コレクション内の各要素オブジェクトです

• //实例
    $("#course li").each(function (index, item) {
  			//3.1 获取 li对象 第一种方式 this
              //alert(this.innerHTML);//js获取
              //alert($(this).html());//jq获取
              /*3.2 获取 li对象 第二种方式
               在回调函数中定义参数 index（索引）item（元素对象）*/
             // alert(index+":"+item.innerHTML);
              alert(index+":"+$(item).html());
  }

2. jQuery.each(object, [callback])

コールバックの戻り値については、 end

2.1. コールバック関数はパラメータを取りません (* 効果は 1.1 と同様で、オブジェクトはこれを通じてのみ取得できます)

-> ;構文: $.each(object,function( ){});

$.each($("#course li"),function () {
              //alert($(this).html());//jq获取方式
   			  alert(this.innerHTML);//js获取方式
         });

2.2. パラメーター付きコールバック関数 (*インデックスインデックスを取得できます。効果は 1.2 と似ていますが、以下のように書き方が異なります)

-> ;構文: $.each(object,function(){index,item});

index: isコレクション内の要素のインデックス

• item: コレクション内の各アイテムです 要素オブジェクト
• this: コレクション内の各要素オブジェクト

• $.each($("#course li"),function (index,item) {
               //3.1 获取 li对象 第一种方式 this
             // alert(this.innerHTML);//js获取
             // alert($(this).html());//jq获取
              /*3.2 获取 li对象 第二种方式
               在回调函数中定义参数 index（索引）item（元素对象）*/
              //alert(index+":"+item.innerHTML);
              alert(index+":"+$(item).html());
           });

3. for…of: jquery 3.0 バージョン以降に提供されたメソッド (*理解) ->構文: for(コンテナの要素オブジェクトobject)

   for (li of $("#course li")) {
            alert($(li).html());
        }

4. コールバック関数は、値の問題 (最初と 2 番目を含む) を返します: (*補足)

true: 現在の関数が false を返した場合、ループを終了します (ブレーク)。

• false: 現在の関数が true を返した場合、このループを終了し、次のループを続行します (継続)
• 例:

  $.each($("#course li"), function (index, item) {
            //判断如果是java，则结束循环
            if ("java" == $(item).html()) {
                //如果当前function返回为false，则结束循环(break)。
                //如果返回为true，则结束本次循环，继续下次循环(continue)
                return false;	
            }
            alert($(this).html());//此时前端页面只会弹出第一个值js
        });
        
  $.each($("#course li"), function (index, item) {
            //判断如果是java，则结束循环
            if ("java" == $(item).html()) {
                //如果当前function返回为false，则结束循环(break)。
                //如果返回为true，则结束本次循环，继续下次循环(continue)
                return true;	
            }
            alert($(this).html());//此时前端页面会依次弹出js,C++jq,不会弹出java
        });

(学習ビデオの共有 ：

ウェブフロントエンド

）

以上がjQueryでトラバースするにはどうすればよいですか?いくつかのトラバーサル手法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。