Question

我正在构建一个扩展函数来应用于任何给定元素：

(function($){
    $.fn.extend({
        SomeFunction: function() {
            var $this = $(this);
        }
    });
})(jQuery);

在脚本标签中，我会放弃：

$(document).ready(function(){
    $('.someclassname').SomeFunction();
});

这样可以正常工作，除了我希望能够将函数的范围作为元素而不是函数引用，正如您在我的一个变量声明中所看到的那样。出于某种原因，它并没有把它当作一个可以应用以下内容的元素：

$this.css('background','red');

为了使其正常工作，我必须将其更改为：

var $this = $('.someclassname');

如何编程扩展函数，以便$ this指向应用SomeFunction的元素？我宁愿不关心班级名称是什么。

谢谢！

Answer 1

在SomeFunction内，this不是DOM元素，它是一个jQuery实例。（插件与事件处理程序非常不同。）该实例可能在其中包含零个，一个或多个匹配的DOM元素。

所以this.css("background", "red");会起作用。 E.g：

(function($){
    $.fn.extend({
        SomeFunction: function() {
            this.css("background", "red");
        }
    });
})(jQuery);

Live Example | Live Source

如果您的目标是使用外部 SomeFunction中的设置（也许SomeFunction会对某种类型进行过滤？），通常您可以通过过滤来实现并返回带有（过滤）结果的jQuery对象。（如果没有过滤，则约定是返回this [全套]。）

例如，假设SomeFunction仅应返回包含文本"kittens"的元素：

(function($){
    $.fn.extend({
        SomeFunction: function() {
            return this.filter(function() {
                return $(this).text().indexOf("kittens") !== -1;
            });
        }
    });
})(jQuery);

然后：

$(document).ready(function(){
    $('.someclassname').SomeFunction().css("background", "red");
});

只会影响someclassname包含文字"kittens"：Live Copy |的元素Live Source

我如何将$（this）视为一个元素？

1 个答案: