各ループの理解といくつかの構文

Question

私はYouTubeのいくつかの動画を表示するYouTube検索エンジンを作っているチュートリアルに従っています。これは講師が各ループについて言及した最初のビデオでした。私はJQueryのドキュメントを見ましたが、まだこのループが何をしようとしているのか、私の頭を抱くことはできません。彼は以下のコードの終わり近くで各ループを持ち込むまで、インストラクターとうまくやっていました。私はインストラクターがこのループで何をしているのかについてはあまりよく分かりません。任意の洞察力は役に立ちます

function search() 
{ 
    $('#results').html(''); 
    $('#buttons').html(''); 

    // get form input 
    q = $('#query').val(); 

    //run GET Request on API 

    $.get(
    "https://www.googleapis.com/youtube/v3/search",{ 
     part:'snippet,id', 
     q:q, 
     type: 'video', 
     key:'AIzaSyCadgai_XAKk2TYQH1f5lXrR5QEHWXowfA' 
     }, 
     function(data) 
    { 
     var nextPageToken = data.nextPageToken; 
     var prevPageToken = data.prevPageToken; 
     // Log data 
     console.log(data); 

     $.each(data.items,function(i,item)) 
     { 
       var output = getOutput(item); 

     $('#results').append(output); 
       } 

    } 
    ); 

} 

Answer 1

これは基本的に単なるループですが、jQuery関数の構文を使用しています。その構文の利点は、選択されたDOM要素のセットをループしたい場合です.jQueryの有用性の中核はDOMを照会する単純さですからです。 でもはどんなコレクションでも機能しますが、必ずしも必要ではありません（一貫性のために構文を使用しない限り）。

.each()は、指定された要素を反復処理して、それぞれの関数を呼び出します。関数内では、iがインデックス（0から要素数-1）であり、itemが現在の要素です。 （そして、それらの2つのパラメータが明確で理解しやすいコードを保つために、あなたが好きな名前を付けることができます。）

基本的には、この：

for (var i = 0; i < data.items.length; i++) { 
    var output = getOutput(data.items[i]); 
    $('#results').append(output); 
} 

Answer 2

で：

$.each(data.items,function(i,item)) 
    { 
     var output = getOutput(item); 
     $('#results').append(output); 
    }); 

はこれに合理的に似ていますコードを見ると、あなたがajax呼び出しから返ってきた応答がオブジェクトであることがわかります。上記のオブジェクトにはitemsというプロパティがあります。インストラクターはitemsプロパティを「foreaching」しているので、配列であると判断できます。したがって、.each()は、data.items配列内のすべての項目を繰り返し処理して、それぞれに対してアクションを実行します。

は今、あなたはgetOutput()関数のコードが含まれていませんが、残りのコードに基づいて、私はそれが.each()ループで現在の項目を使用してHTMLマークアップを生成していることがわかります。 HTMLマークアップをgetOutput()から取得した後、id = "results"の要素にHTMLを追加します（結果要素が表示されていると仮定すると、画面に表示されます）。

あなたはそれが何をしているのかを理解するのに役立ちます。