title: What is the most efficient way to traverse up in jQuery
body: <p>I'm trying to close a parent container when an internally nested button is clicked.  In my UI -- I have many of these parent containers (I'm rendering preview windows of my product catalogue on a product category page).  </p>
  
  <p>As you can see from my mark-up below -- the CLOSE button is deeply nested in the DOM.  When the user clicks on the CLOSE Button -- I need to hide() the parent Box-1.  Keep in mind I may have upto to 100 products being displayed on a page (100 boxes of "Box-1"s) at a time. </p>
  
  <p>My markup looks like this:</p>
  
  <pre><code>&lt;div class="box-1"&gt;
    &lt;div class="box-2"&gt;
      &lt;div class="box-3"&gt;...&lt;/div&gt; &lt;!-- end box-3 --&gt;
  
      &lt;div class="box-4"&gt;
        &lt;div class="box-5"&gt;...&lt;/div&gt; &lt;!-- end box-5 --&gt;
          &lt;a class="btn-close" href="#"&gt;CLOSE&lt;/a&gt;  &lt;!-- this triggers the close event --&gt;
      &lt;/div&gt; &lt;!-- end box-4 --&gt;
    &lt;/div&gt; &lt;!-- end box-2 --&gt;
  
    &lt;div class="box-6"&gt;
      &lt;div class="box-7"&gt;...&lt;/div&gt; &lt;!-- end box-7 --&gt;
  
      &lt;div class="box-8"&gt;
        ...
        &lt;div class="box-9"&gt;...&lt;/div&gt; &lt;!-- end box-9 --&gt;
      &lt;/div&gt; &lt;!-- end box-8 --&gt;
    &lt;/div&gt; &lt;!-- end box-6 --&gt;
  &lt;/div&gt; &lt;!-- end box-1 --&gt;
  </code></pre>
  
  <p>My question is -- how do I best (and most efficiently) traverse back up the DOM to get hold of the "box-1" and issue the .hide() method ... here is my existing code. </p>
  
  <pre><code>&lt;script&gt;
  $productsResultItems.delegate('.btn-close', 'click', function (e) {
      //box-1
      $(this).parents('div.box-1').hide(); // &lt;-- is this the best way?????
      e.preventDefault();
  &lt;/script&gt;
  </code></pre>
  
  <p>Initially, I was trying this -- </p>
  
  <pre><code>$this.parents().find('.hover-box-large').hide();
  </code></pre>
  
  <p>which was proving to be very slow in IE7 and IE8. </p>
  
  <p>I found adding more detail to the selector improved performance nearly 100-fold for IE7, but only 4-fold faster in IE8 :(  IE8 still requires about 200ms to close the parent container. Where now all other browsers (Chrome, Safari, Firefox and IE7) close the container in less than 20ms.</p>
  
  <pre><code>$this.parents('div.hover-box-large').hide();
  </code></pre>
  
  <p>But is there a selector method that is even better? Any particular reason IE8 is soooo bad at this type of upward traversal??</p>