jQuery插件中$(this)的范围

时间:2015-04-12 16:02:36

标签: jquery

我在尝试在jQuery插件中计算出$(this)的范围时感到困惑。请使用以下简单插件:

;(function($){

    $.fn.somePlugin = function(options) {  

        // Defaults
        var defaults = {  

            foo: 'bar'

        };

        // Options
        var options = $.extend(defaults, options);


        // Return each object
        return this.each(function() {

            // Cache $(this)
            var $this = $(this);


            // Do whatever the plugin needs to do here


            // A test public function
            $.fn.somePublicFunction = function() {

                // $this or $(this)?

            };

            // A test private function
            function privateFunction() {

                // $this or $(this)?

            }

        });

    };

})(jQuery);

我可以在 私有函数 $this中收集的内容将使用匹配的元素数组中的最后一个索引,这会导致问题。 $(this)未定义。因此,如果您想引用特定的匹配元素,则需要在使用其他方法匹配您希望使用的特定元素之后将其传递给私有函数。或者,如果需要,您可以执行this.each并遍历所有匹配的元素。

公共功能 中,$这不在范围内,因此您必须使用$(this)或此循环遍历所有匹配的元素。

这是对的吗?为什么$.fn.somePublicFunction没有$(this)可用?通常,公共函数是否始终适用于所有匹配的元素?

1 个答案:

答案 0 :(得分:1)

this$(this)是相同的,范围没有区别。

$(this)this,但只转换为jQuery对象。这样,$(this)将在this所在的任何地方都可见。

this可以是 DOM元素

jQuery将回调函数的范围设置为回调主题的元素。例如,当您迭代集合,设置侦听器或处理事件时。

$('#id').on('click', function() {
    // this == $('#id')
}

this可以是对象

例如,当您迭代任何对象的集合时。

var my_arr = [1, 2, 3];
$.each(arr, function(i, obj) {
    // 'this' is an object of current iteration
}

this可以是 jQuery对象

当你使用fn扩展扩展jQuery时,方法内的this是一个jQuery对象(== $):

$.fn.myPlug = function() {
    // this is here a jQuery object, on which the method is called
});

这也可以是AJAX查询中的 AJAX设置对象

使用var $this = $(this);时,只需将当前this作为jQuery对象保存到名为$this的变量,如果this在当前上下文中不同,则不等于先前声明的$this