在jQuery中,this.each()如何工作?

时间:2010-06-24 00:04:04

标签: javascript jquery jquery-plugins

为了使我的问题更具体,我阅读了关于jQuery的.each()文档,但我有点困惑。我有这段代码:

$.fn.imgAreaSelect = function (options) {
options = options || {};

this.each(function () {
    if ($(this).data('imgAreaSelect')) {
        if (options.remove) {
            $(this).data('imgAreaSelect').remove();
            $(this).removeData('imgAreaSelect');
        }
        else
            $(this).data('imgAreaSelect').setOptions(options);
    }
    else if (!options.remove) {
        if (options.enable === undefined && options.disable === undefined)
            options.enable = true;

        $(this).data('imgAreaSelect', new $.imgAreaSelect(this, options));
    }
});

if (options.instance)
    return $(this).data('imgAreaSelect');

return this;

};

现在我没有得到的是为什么每个函数都没有索引或元素?这段代码来自我试图阅读的jQuery插件。我也不太了解$ .fn。在顶部,我知道它代表原型,但究竟发生了什么?

3 个答案:

答案 0 :(得分:8)

每个函数都可以接受一个索引作为参数的函数,但它是可选的。

为简单起见,实现了.each以使this引用当前元素。

但是,.each 可以接受索引作为其回调的参数。

jQuery API中有一个使用示例

$('li').each(function(index) {
    alert(index + ': ' + $(this).text());
});

参考 - http://api.jquery.com/each/

答案 1 :(得分:3)

它不需要索引,因为this提供了上下文。正如docs所述,“也可以通过this关键字访问该值。”这是通过使用call来完成的。类似的东西:

userFunction.call(valueOfElement, indexInArray, valueOfElement);

$.fn.imgAreaSelect = function (options)表示该函数正被添加到原型中。这允许它与jQuery对象的任何实例一起使用。

答案 2 :(得分:2)

$.each(fn)为当前上下文中包含的每个元素调用fn。每次调用fn时,它都会将“当前”元素作为this传递。

所以在下面的例子中:

$("div").each(function() {
    alert(this.className);
});

将为DOM中的每个<div>弹出一个警报,并显示每个警告的类名。