title: parent vs closest
body: <p>Why does this work:</p>
  
  <pre><code>$('.button_30').click(function(){
      $(this).closest('.portlet').find('.portlet_content').text("foo");
  });​
  </code></pre>
  
  <p>any why does this not work:</p>
  
  <pre><code>$('.button_30').click(function(){
      $(this).parent('.portlet').find('.portlet_content').text("foo");
  });​
  </code></pre>
  
  <p>where the html looks something like this:</p>
  
  <pre><code>&lt;div class="portlet portlet_30"&gt;
  
      &lt;div class="portlet_header portlet_header_30"&gt;
          header content here
      &lt;/div&gt;
  
      &lt;div class="portlet_sub_header portlet_sub_header_30"&gt;
          &lt;input type="text" class="textbox_30" /&gt;
      &lt;/div&gt;
  
      &lt;div class="portlet_content portlet_content_30"&gt;
          results go here
      &lt;/div&gt;
  
      &lt;div class="portlet_footer portlet_footer_30"&gt;
          &lt;input type="button" class="button_30" /&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="portlet portlet_30"&gt;
  
      &lt;div class="portlet_header portlet_header_30"&gt;
          header content here
      &lt;/div&gt;
  
      &lt;div class="portlet_sub_header portlet_sub_header_30"&gt;
          &lt;input type="text" class="textbox_30 /&gt;
      &lt;/div&gt;
  
      &lt;div class="portlet_content portlet_content_30"&gt;
          results go here
      &lt;/div&gt;
  
      &lt;div class="portlet_footer portlet_footer_30"&gt;
          &lt;input type="button" class="button_30" /&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>