2

I am writing a jquery UI widget that simply wraps the bootstrap popover plugin, In the widget you can pass in the option 'singular', if this is passed in then it should call a function of all other instances of the plugin.

something like

$('#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

So, I imagine the show function looking like:

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');

}

So, question being, how would I get a reference to all elements that have the myWidget widget on them?

ds111
  • 379
  • 2
  • 7
Hailwood
  • 89,623
  • 107
  • 270
  • 423
  • 2
    When you apply the plugin to those elements, then you're referencing them in `return this.each(function(){` in your instantiator. so just give them a class like, `myWidget` then you can do `$('.myWidget').each(`.. – Ohgodwhy Nov 02 '12 at 23:01
  • I agree- you can place a class on the widgets - then run through an each - I've seen coders place a data attribute - then run the each that way as their selector –  Nov 03 '12 at 00:07
  • That works, and what about getting a reference to all instances of a widget you don't control (e.g. UI's progressbar's etc) – Hailwood Nov 03 '12 at 01:10

1 Answers1

8

You can use $(':ui-myWidget') where ui is your widget's namespace. It is slower than using a class selector like $('.ui-myWidget') so it is still good practice to add the class when your widget gets created.

jQuery UI does this for all there widgets so you could get each progressbar by either $(':ui-progressbar') or $('.ui-progressbar').

This blog post explains thin in greater depth.

Victor
  • 3,669
  • 3
  • 37
  • 42
bconrad
  • 402
  • 4
  • 14