Jquery 理解。每个循环和一些语法

所以，我正在学习一个教程，我们正在制作一个youtube搜索引擎，它将显示来自youtube的一些视频。这是讲师提到每个循环的第一个视频。我查看了JQuery文档，但仍然无法理解每个循环到底要做什么。我一直跟在教练后面，直到他在下面代码的末尾引入了each循环。我不太确定讲师对这个循环做了什么。任何见解都会有所帮助

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);
               }

    }
    );

}

---

它基本上只是一个循环，但是使用jQuery函数语法。这种语法的好处是，当您想要在一组选定的DOM元素上循环时，因为jQuery的实用性的核心是查询DOM的简单性。虽然它也适用于任何集合，但并不总是必需的（除非您只是想使用语法来保持一致性）

.each（）

只需对给定的元素进行迭代，并对每个元素调用提供的函数。在函数中，

i

是索引（0通过元素计数减去1），而

item

是当前元素。（这两个参数可以随意命名，以保持代码清晰易懂。）

基本上，这是：

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

与此相当相似：

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

for（var i=0；i

通过查看代码，我可以看出您从ajax调用中得到的响应是一个对象。所述对象具有名为items的属性。由于讲师正在“预处理”items属性，因此我可以断定它是一个数组。因此，

.each（）

将迭代data.items数组中的每个项，以对每个项执行操作

现在，您还没有包括

getOutput（）

函数的代码，但是根据其余的代码，我可以看到它正在使用

.each（）

循环中的当前项生成HTML标记。从

getOutput（）

获取HTML标记后，它将HTML附加到id为=“results”的元素，该元素将显示在屏幕上（假设results元素可见）

---

希望这能帮助你理解它在做什么

它只需迭代

数据。items

（第一个参数）和回调函数（第二个参数）将集合中的每个值追加到

#results

（id为

results

的DOM元素）-

i

是正在迭代的当前索引，

item

是该索引

$中的实际项。get

返回数据，在该代码中方便地命名为

data

。在

数据中

有一个数组名

项

。因此，

$.each（data.items）

正在迭代

items

数组中的每个项。在迭代项时，

函数（i，item）

是将当前项分配给

项

变量的方法。然后，它将每个项目传递给

getOutput（）

，并将其返回值附加到

#results

.oh。。这段时间我一直觉得这是函数数据（），而不是函数（数据）。我想这就是我盲目模仿老师的结果。将数据放入函数（）中的具体作用是什么？我认为我们必须命名所有函数。像函数搜索（）{stuff here}，至少这是我们在课程中一直在做的。@Munt您可以命名这个函数（例如

function myFunc（i，item）{…}

），然后将它传递给

$。通过执行
$每个
循环。每个（data.items，myFunc）

（注意，我只传递函数的名称而不传递）“（）”在它之后，

$。每个

循环都会为您调用它，您也可以手动重用此函数，或者使用更多的

$。每个

循环的方式都相同。）@Munt：这是一个匿名函数。在JavaScript中，函数与任何其他对象一样都是对象。在这种回调语法中，您只是定义了一个未命名的函数（

function（data）{…}

）将被调用。在

each（）

的实现内部，函数被命名为

each（）的参数

。您可以在这里看到这个概念的一个简单示例：定义了一个函数，该函数本身希望向其传递一个函数。然后我调用该函数并向其传递一个匿名函数。嗯，每个循环如何知道做I++？这是默认值？因此我们必须指定是否每次都要将I更改3？例如是youtube API中的data.items吗？我在代码中的任何地方都没有定义data.items，突然我们就从这些项开始循环。@Munt:the

.each（）的实现jQuery中的

函数递增

i

。是的，如果您想递增1以外的任何值，您可能需要编写自己的循环，而不是使用

。each（）

函数。

数据

（在本例中）只是从YouTube API返回的对象（由

.get（）

函数进行的AJAX调用）和

items

是该对象（特别是数组）上的一个属性。@Munt我不相信您可以修改.each（）的迭代器。它只是一次迭代一个元素，每次迭代任何数据集中的元素。另外，是的，data.items来自您的ajax请求。这是youtube API响应您的请求发送给您的数据。@Munt:您没有设置

数据

。

get（）

函数正在从AJAX请求收集信息（您可以在浏览器调试工具的“网络”选项卡上看到），并将该信息作为对象传递给提供给

get（）

的回调函数。请注意，该函数的参数名为

data

。您可以调用该参数