javascript - 获取对 jquery ui 小部件所有实例的引用？

Question

我正在编写一个 jquery UI 小部件，它简单地包装了 bootstrap popover 插件，在小部件中，您可以传入选项“singular”，如果传入，那么它应该调用插件的所有其他实例的函数。

就像是

$('#one').myWidget();
$('#two').myWidget();
$('#three').myWidget();
$('#four').myWidget();

$('#one').myWidget('show'); //stuff from widget one is now visible
$('#two').myWidget('show'); //stuff from widget one and two are now visible
$('#three').myWidget('show'); //stuff from widget one, two and three are now visible
$('#two').myWidget('hide'); //stuff from widget one and three are now visible
$('#four').myWidget('show', {singular:true}); //stuff from widget four is now visible

所以，我想象 show 函数看起来像：

show: function(options){
    options = options || {};

    if(options.singular){
        var instances = '????'; // how do I get all instances?
        $.each(instances, function(i, o){
            o.myWidget('hide');
        });
    }

    this.element.popover('show');

}

所以，问题是，我将如何获得对所有具有myWidget小部件的元素的引用？

Answer 1

您可以使用$(':ui-myWidget')whereui是您的小部件的命名空间。它比使用类选择器慢，$('.ui-myWidget')因此在创建小部件时添加类仍然是一个好习惯。

jQuery UI 对所有小部件执行此操作，因此您可以通过$(':ui-progressbar')或获取每个进度条$('.ui-progressbar')。

这篇博文更深入地解释了薄。