特定元素上的 jquery 插件答案

【问题标题】：jquery plugin on a specific element特定元素上的 jquery 插件
【发布时间】：2015-11-30 16:37:10
【问题描述】：

有什么方法可以为特定元素定义 jquery 插件吗？喜欢javascript提供的方式吗？

例如，
在javascript中，我可以这样做

HTMLSelectElement.prototype.loadData = function () {
    //do something
};

有了这个我可以在select上使用loadData函数，我怎么能用jQuery做到这一点？

我知道这件事，

(function ($) {
    $.fn.loadData = function () {
        //do something
    };
}(jQuery));

但是，如何确保我使用此插件的元素是select 元素而不是其他元素？

【问题讨论】：

通过 $('#YourItemID').yourfunction(); 选择元素；
@brandelizer 如何防止在其他元素上使用此插件？
您可以采用 'css 选择器'，例如 :first-of-type 或其他...或者您为该元素选择一个唯一 ID
api.jquery.com/category/selectors
@brandelizer 这不是问题，如何让这个插件只在选择正确的元素时出现？例如，我希望这个函数只出现在 select 元素上，而不是 div

标签： jquery

【解决方案1】：

你可以在函数开始时停止它：

(function ($) {
    $.fn.loadData = function () {
        var index = 0, $this = $(this), length = $this.length;
        for ( ; index < length; index++) {
            var current = $this[index];
            if (!$(current).is('select')) {
                return;
            }
        }
        // do something
    };
}(jQuery));

编辑：更新以处理对多个元素的调用插件。谢谢菲利克斯！

【讨论】：

值得指出的是，如果至少有一个元素匹配，.is 会返回true。
@FelixKling 谢谢！更新了答案。

【解决方案2】：

您可以使用 .is() (http://api.jquery.com/is/) 来测试 $(this) 是否是您的函数内的选择元素。

(function ($) {
    $.fn.loadData = function () {
        if (!$(this).is('select')){
            return;
        }
    };
}(jQuery));

【讨论】：