检测jQuery插件是不是应用于多个元素？

Posted 2023-05-08

【中文标题】检测jQuery插件是不是应用于多个元素？

【英文标题】：Detect if jQuery plugin is applied to multiple elements?检测jQuery插件是否应用于多个元素？

【发布时间】：2011-04-15 16:55:12

【问题描述】：

我正在开发一个可以应用于多个元素的 jQuery 插件。该插件包含一些动画效果，我需要根据插件是否用于多个元素（而不是一个）来管理事件队列。

检测插件是应用于单个元素还是多个元素的最佳方法是什么？

编辑...

如果向插件传递多个元素（例如 $('.myClass').plugin()），length 属性可以正常工作，但如果在多个单个元素（例如 $('#myElem1').plugin() 和 $('#myElem2').plugin()）上调用插件，则长度返回每次调用一个。

有没有办法在第二个例子中使用插件时检测多个实例/

【问题讨论】：

我添加了一种方法来做到这一点......但请记住，当它在第一个元素上调用时，计数将为 1，你无法知道它会应用于更多之后的元素。

【参考方案1】：

插件里面的this，根据你的风格，指的是jQuery对象，所以你可以检查the .length property，例如：

 jQuery.fn.plugin = function(options) 
   if(this.length > 1) //being applied to multiple elements
 ;

供您编辑：跟踪总数可能是更好的选择，例如：

(function($) 
  $.pluginCount = 0;
  $.fn.plugin = function(options) 
    $.pluginCount += this.length;    //add to total
    if($.pluginCount > 1) //overall being applied to multiple elements
  ;
)(jQuery)

【参考方案2】：

假设您通过 $('some selector').myPlugin() 应用插件，“this”关键字将引用您在插件函数中调用插件的 jquery 对象。

所以，总结一下：

(函数($) $.fn.myPlugin = function() 如果（this.size（）> 1） //多个元素的代码 否则 if(this.size() == 1) //1个元素的代码 )( jQuery ); $('div.to-pluginize').myPlugin();

【参考方案3】：

如果您想要一种通用的方法来测试插件是否已应用于任意一组元素，这是一种方法：

// say we want to apply this to a bunch of elements
​​$.fn.test = function(str) 
    this.each(function() 
        // set a boolean data property for each element to which the plugin is applied
        $(this).data('test', true);
        alert(str);
    );
;


// use a simple plugin to extract the count of a specified plugin
// from a set of elements
$.fn.pluginApplied = function(pluginName) 
    var count = 0;
    this.each(function() 
        if($(this).data(pluginName)) 
            count++;
        
    );
    return count;
;

使用此标记：

<a href="test" class="test">Hello</a>
<br />
<a href="test" class="test">Hello</a>

这是一个测试：

$("a").test('test');

alert($("*").pluginApplied('test'));​​​​​​​​​​​​​​​​ // alerts '2'

演示：http://jsfiddle.net/B5QVC/