jQuery each() - 它是如何在内部工作的?

时间:2012-11-01 23:39:07

标签: javascript jquery

我已就此咨询了jQuery的来源,但我必须承认这可能超出了我的理解 - 或者我在寻找错误的地方。 https://github.com/jquery/jquery/blob/master/src/core.js

在第222行附近有一个看起来递归的函数,然后在第566行附近还有另一个在.extend()命名空间中声明的函数。

我只是好奇 - 这究竟是如何运作的?例如,当我打电话时:

$('.item').each(function(){
    // Do Something
});

如何知道循环遍历DOM元素数组,何时停止,它如何应用该函数?它不能做到

$('.item').doThis()

因为doThis()可能不是该对象的成员。

请赐教:)谢谢。

4 个答案:

答案 0 :(得分:2)

据我所知,这个

$('selector').each(func);

相当于这样做:

func = ...;
$selector = $('selector');
for (var i = 0; i < $selector.length; i++) {
    if (func.call($selector[i], i, $selector[i]) === false) {
        break;
    }
}

$ selection返回的对象实际上是一个DOM元素数组,附加了一大堆额外的方法,所以你基本上可以像使用Array一样使用它。希望能搞清楚!

答案 1 :(得分:2)

不,它不是递归的。 line 222上的函数是jQuery原型($.fn)上的函数,而它调用的函数是jQuery.each - 一个静态属性,在line 566中定义。请注意extend的工作原理:如果没有给出要扩展的对象,则使用this。它在代码的不同部分都应用于jQueryjQuery.fn

  

这究竟是如何运作的?

$obj.each(callback)正在调用$.fn.each方法,该方法在jQuery实例(DOM包装器)本身上应用$.eachline 223

现在,在$.each中,有四种情况:有或没有提供的args数组,以及类似数组的结构或其他对象。您没有传递额外的args,并且jQuery实例具有length属性并且在数字索引中具有DOM元素,因此将执行line 596中的循环。所以你的电话相当于

for (var i=0, len=$obj.length; i<len; i++)
    if ( callback.call($obj[i], i, $obj[i]) === false ) break;

答案 2 :(得分:0)

您在jQuery中执行的每个查询都存储为类似于对象的数组,这意味着您可以通过执行以下操作来访问查询找到的DOM元素列表:

$('.item')[0] //The first item found by your query

在内部,$()。每个都使用$ .each,这是一种迭代你的集合,调用你作为参数传递的函数,并使用&#39; Function.apply&#39;设置这个&#39;成为当前正在迭代的对象。

答案 3 :(得分:0)

查看the source

中的第566行至第605行

它是迭代的,相当简单。