jQuery插件不适用于所应用的所有元素

jQuery Plugin not working for all elements that is applied upon

本文关键字：元素 应用 jQuery 不适用 适用于 插件      更新时间：2023-09-26

考虑以下jQuery插件代码：

(function($){
$.fn.MyPluginMethod= function() {
    $(this).after('<span>Hello</span>');
    };
})(jQuery);

如果我们这样调用这个函数：$('a').MyPluginMethod();对于存在的每个<a>标签，它将在其后添加一个<span>标签。

如果我们这样更改：

(function($){
$.fn.MyPluginMethod= function() {
    title= $(this).attr('title');
    alert(title);
};
})(jQuery);

对于存在的每个<a>标记，它不会提醒标题，仅针对第一次出现。

为什么会有这种行为？感谢

这是因为您正在创建插件的一个实例，所以alert()被调用一次。第一个示例在每个a之后产生span元素的原因是after()jQuery函数循环通过匹配的元素集。

要使后一个示例按您的意愿工作，您需要手动循环：

(function($){
    $.fn.MyPluginMethod= function() {
        this.each(function() {
            title = $(this).attr('title');
            alert(title);
        });
    };
})(jQuery);

您可以使用this.length 检查插件是否已在多个元素上实例化

当您调用它时，它将alert，也可以使用$.each为等多个元素调用它

HTML

<div title="test">test</div>
<div title="test123">test123</div>

脚本

(function($){
$.fn.MyPluginMethod= function() {
    return $(this).each(function(){
      title= $(this).attr('title');
      alert(title);
    });
};
})(jQuery);
$('div').MyPluginMethod();

更新的Fiddle

读取http://learn.jquery.com/plugins/basic-plugin-creation/

相关文章：