What is the most efficient way to transition in jQuery

Question

I try to close the parent container when the internally nested button is clicked. In my user interface - I have many of these parent containers (I am looking at the preview windows of my product catalog on the product category page).

As you can see from my markup below, the CLOSE button is deeply embedded in the DOM. When the user presses the CLOSE button, I need to hide () the parent Box-1. Keep in mind that there can be up to 100 products displayed per page (100 Box-1 boxes at a time).

My markup is as follows:

<div class="box-1"> <div class="box-2"> <div class="box-3">...</div> <!-- end box-3 --> <div class="box-4"> <div class="box-5">...</div> <!-- end box-5 --> <a class="btn-close" href="#">CLOSE</a> <!-- this triggers the close event --> </div> <!-- end box-4 --> </div> <!-- end box-2 --> <div class="box-6"> <div class="box-7">...</div> <!-- end box-7 --> <div class="box-8"> ... <div class="box-9">...</div> <!-- end box-9 --> </div> <!-- end box-8 --> </div> <!-- end box-6 --> </div> <!-- end box-1 --> 

My question is: how do I best (and most efficiently) traverse the DOM to get box-1 and issue the .hide () method ... here is my existing code.

 <script> $productsResultItems.delegate('.btn-close', 'click', function (e) { //box-1 $(this).parents('div.box-1').hide(); // <-- is this the best way????? e.preventDefault(); </script> 

I originally tried to do this -

 $this.parents().find('.hover-box-large').hide(); 

which turned out to be very slow in IE7 and IE8.

I found that adding more details on the selector improved performance by almost 100 times for IE7, but only 4 times faster in IE8 :( IE8 still requires about 200 ms to close the parent container. Where are all the other browsers now (Chrome, Safari, Firefox, and IE7) close the container in less than 20 ms.

 $this.parents('div.hover-box-large').hide(); 

But is there a better choice method? Any special reason why IE8 is soooo bad in this type of upstream workaround ??

Answer 1

The best way to use closest , which finds the closest ancestor element that matches the selector:

 $this.closest('div.box-1').hide(); 

Answer 2

In fact .closest() should be faster than .parents() .

In jQuery Docs on .closest() you can find:

.closest ()

• Starts with the current item.
• Moves the DOM tree until it finds a match for the supplied selector
• The returned jQuery object contains zero or one element

.parents ()

• Starts with parent
• Moving the DOM tree to the root element of the document, adding each element of the ancestor to the temporary collection; it then filters the collection based on the selector if supplied
• The returned jQuery object contains zero, one or more elements

So, in your case .closest() would be most suitable, since you need to find one element, the closest ancestor that matches your selector. parents() will filter all possible elements of the ancestor, even if he already found the one you need.

Answer 3

The only difference between parent () and closeest () is that the closest () stops as soon as it finds a match, so it always returns 0 or 1 element. Parents () will map everything to the DOM.

 $(this).closest('.box-1').hide(); 

Answer 4

Not so fast! closest() may be the best, but not always! Here, as you can find out for yourself. Use Firebug time () and timeEnd () to actually record your calls. Then choose the one that suits the situation.

 // 59ms console.time("Parent x 3"); $container = $element.parent().parent().parent(); console.timeEnd("Parent x 3"); // 3ms console.time("Closest parent"); $container = $element.closest('.some-class').parent(); console.timeEnd("Closest parent"); // 2ms console.time("Parents"); $container = $element.parents('.other-class').eq(1); console.timeEnd("Parents");