jQuery插件不适用于所应用的所有元素
jQuery Plugin not working for all elements that is applied upon
考虑以下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/
相关文章:
- 编写脚本以循环遍历数组并为DOM元素应用值
- 对每个元素应用不同的 CSS
- 将新元素作为指令的默认元素应用
- 仅对一个元素应用设置间隔
- 如果单词出现第 n 次,则对元素应用更改
- 为每个 DOM 元素应用随机 CSS
- 获取一个元素的宽度,并相对于第一个元素应用于另一个元素
- 对子元素应用悬停效果
- 使用纯javascript获取li元素onclick,而不对每个元素应用onclick
- 将数组的元素应用于函数javascript
- 对td元素应用填充引发异常
- 如何为JavaScript附加的DOM元素应用类似live()的功能
- D3.js -有条件地对数组元素应用nest.key()函数
- 对一组元素应用angular指令
- 如何使用min/max-height和height为元素应用响应式CSS高度
- 对未选中的元素应用样式
- 对所有带有id的元素应用JavaScript
- 如何为多个元素应用jquery悬停
- 动态地对:before元素应用样式
- 如果draggable元素应用了转换,Jquery的draggable containment将不起作用