jQuery UI widget : How can I get the widget's container?

Question

I'm currently developping a jQuery UI widget uising the widget factory, and I need to get the selector containing my widget.

To clear things up :

• I use jQuery UI tabs (official)
• My widget is created in each tab (1 instance for each tab, meaning different displays)
• When i perform an action in a tab, it needs to update the widget located in the same tab

The problem :

• When I perform the said action, the update does not occur in the right tab, but in the first one

I tried several modifications of the listeners on my actions, but I believe the problem comes from the widget itself. Everything is defined with classes (because it's meant to appears multiple times), except for the tab itself who is defined with an id. I tried to make it happen in the widget element which is a child of the said div#id, but it doesn't work.

What I need is to know how to get the container of the widget from within the widget's code, to make the modifications in the right tab

Thank you for you help.

EDIT : here's a jsfiddle showing the (very) basic structure of my app. When I fire my action, I do it on the nearest widget instance, meaning the one in the same tab. But the actual effect is in the first tab. This is because (I think) of my plugin who locates its own elements using classes. But if I could say

Get the elements who are children of the container I was created in

I believe it would work

Answer 1

You need to use something like:

myElement.mywidget("widget");

Answer 2

Completing fnagel answer based on your fiddle :

$(document).ready(function(){
   $('#tabs').tabs(); 

   $('#widget-1').mywidget().mywidget('widget').attr('id','widget-1_mywidget');
   $('#widget-2').mywidget().mywidget('widget').attr('id','widget-2_mywidget');

   $('.action').click(function(){
       var myWidget = $(this).siblings('.widget').mywidget("widget");
       myWidget.mywidget('dothis');
   });
});​