Hailwood Hailwood - 1 year ago 68
jQuery Question

Get reference to all instances of jquery ui widget?

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('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 || {};

var instances = '????'; // how do I get all instances?
$.each(instances, function(i, o){



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


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.