title: jQuery's closest find confusion
body: <p>I have 3 of the same widgets on my screen, widgets as in 3 div tags with content which the user chooses to have on his/her screen, which s/he can move and arrange on the screen.  A bit like what iGoogle did.  So basically, they can have 0 or more of the same widgets on the screen.</p>
  
  <p>I got this working by using classes in the html instead of ids.</p>
  
  <pre><code>&lt;div class="widget_1"&gt;
      &lt;div class="widget_header_1"&gt;&lt;/div&gt;
      &lt;div class="widget_sub_header_1"&gt;&lt;/div&gt;
      &lt;div class="widget_content_1"&gt;&lt;/div&gt;
      &lt;div class="widget_footer_1"&gt;&lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>So if I have 2 of these widgets, the users screen will have 2 widgets with the class <code>widget_1</code>, i.e. the above html will be in the html source twice.</p>
  
  <p>Anyway, I have a button in the sub_header of the widgets which adds data to the <code>content</code> section of the widget, i.e.</p>
  
  <pre><code>$('.my_button').live('click',function() {
      get_data( $(this) );
  });
  </code></pre>
  
  <p>That works fine, as in, if I click on the button in the first <code>widget_1</code>, only it's content will change, if I click on the button in the second <code>widget_1</code>, only it's content will change and it will not effect the other <code>widget_1</code>'s.</p>
  
  <p>To do that I am using:</p>
  
  <pre><code>$(this).closest('.widget_1').find('.widget_content_1').empty().append( some_data_here );
  </code></pre>
  
  <p>My question is, I want to prepend a loading image into the content when a button is clicked in the <code>sub_header</code> of a widget, so I tried:</p>
  
  <pre><code>$(this).closest('.widget_1').find('.widget_content_1').prepend( "&lt;img class='imgLoading' src='/img/loading_white_32.gif'&gt;&lt;/img&gt;" );
  </code></pre>
  
  <p>This works in that it only displays a loading image in the widget in which the button was clicked, but it displays 2 images in the clicked <code>widget_1</code> if I have 2 <code>widget_1</code>'s on the screen, and it will display 5 images in the clicked <code>widget_1</code> if I have 5 <code>widget_1</code>'s on the screen.  </p>
  
  <p>Why is that happening?</p>
  
  <p>It should be displaying just 1 loading image in the clicked <code>widget_1</code> no matter how many <code>widget_1</code>'s are on the screen.</p>