Каков наиболее эффективный способ перехода вверх в jQuery

Я пытаюсь закрыть родительский контейнер, когда нажимается внутренняя вложенная кнопка. Пользовательский интерфейс - у меня много таких родительских контейнеров (я визуализирую окна предварительного просмотра своего каталога продуктов на странице категории продуктов).

Как вы можете видеть из моей разметки ниже - кнопка ЗАКРЫТЬ глубоко вложена в DOM. Когда пользователь нажимает кнопку "ЗАКРЫТЬ" - мне нужно скрыть () родительский Box-1. Имейте в виду, что на странице может отображаться до 100 продуктов (100 коробок "Box-1" ) за раз.

Моя разметка выглядит так:

<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 -->

У меня вопрос - как мне лучше (и наиболее эффективно) пройти назад по DOM, чтобы получить "ящик-1" и вызвать метод .hide () ... вот мой существующий код.

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

Изначально я пробовал это -

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

, которое оказалось очень медленным в IE7 и IE8.

Я обнаружил, что добавление дополнительных деталей к селектору повысило производительность почти в 100 раз для IE7, но только в 4 раза быстрее в IE8 :( IE8 по-прежнему требует около 200 мс, чтобы закрыть родительский контейнер. Теперь все остальные браузеры (Chrome, Safari , Firefox и IE7) закрывают контейнер менее чем за 20 мс.

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

Но есть ли еще лучший метод выбора? Какая-либо конкретная причина, по которой IE8 так плохо справляется с этим типом обхода вверх ??

6
задан kapa 8 June 2011 в 06:36
поделиться