Question

我最近遇到过这些代码，同时学习如何编写动画库并且不知道它们的含义：

var items = $('#gallery li'),
        itemsByTags = {};
items.each(function(i){
        var elem = $(this),
        tags = elem.data('tags').split(',');        
//Add data attribute for quicksand
        elem.attr('data-id',i);

我知道var items = $('#gallery li'),itemsByTags = {};意味着我通过jQuery获取列表ID，然后将名为itemsByTags的变量设置为空字符串。

之后items.each是一个设计用于遍历所有列表的循环。但我不知道function(i)是什么？为什么函数内部有i？这i是什么东西？

此外，$(this)是什么意思？它是指items吗？

最后，.attr()对i的意义是什么？

Answer 1

正如警告一样，Stack Overflow上没有高度重视这样的问题，因为可以通过访问关于您正在使用的功能的单个页面来回答它们，在这种情况下，这将是documentation for the jQuery .each() function。像这样的问题往往被低估并且永远不会得到答案，所以在发布问题之前，您应该始终检查文档中是否有您正在使用的代码或库，以查看您的问题是否已在那里得到解答。

除此之外，这里有几点可以帮助回答你的问题：

itemsByTags = {};将变量设置为空对象，而不是字符串。但是，您提供的代码中未使用此变量，因此它与手头的问题不太相关。

正如您所指出的，

items.each(function(i){是一个用于循环遍历项目数组的函数。 Each函数通常会输出两个不同的值，键和值。但是，在这种情况下，函数调用中只提供了一个变量，因此该函数只接收第一个值，即 key 。关键是您所在项目编号的从0开始的索引。每次移动到数组中的下一个项目时，此数字将增加1。解释此问题的另一种方式是，array[key]会在项目编号value的{{1}}中返回array。

key是jQuery引用当前从数组中检索的对象的方式。由于$(this)检索页面中与选择器var items = $('#gallery li')匹配的所有对象的列表，因此#gallery li引用页面中具有数组元素的实际对象正在检索。 $(this)可以使用与$(this)之类的普通选择器进行定位相同的方式进行修改和操作。

您现在可能已确定最后一行正在做什么。 $('#gallery li').eq(i)在页面中查找当前数组项的元素，并将其$(this).attr('data-id',i);属性设置为相对于其兄弟的基于0的索引。如果以这种方式遍历数组，则第6个（仅作为示例）data-id元素的$('#gallery li')属性将更改为data-id。

希望这有用！

.each（function {} .split和.attr

1 个答案: