Оптимизация селектора jQuery

Question

Следующий код работает нормально, однако я не уверен, насколько он эффективен, и хотел предложить экспертам, если они смогут предложить лучшие альтернативы;что потом, я надеюсь, я смогу понять, как и почему и более эффективно кодировать в будущем.

$('.sub-level').slideUp(0);
$('.active + .sub-level').slideDown(0);
$('.active').parents('.sub-level').slideDown(0);

Этот скрипт jQuery закрывает и открывает соответствующие подменю при первой загрузке страницы.Он основан на следующем примере HTML:

<ul>
  <li>
    <a href="audio">Audio</a>
  </li>
  <li>
    <a href="computing">Computing</a>
    <ul class="sub-level sub-level-1">
      <li><a href="laptops">Laptops</a></li>
      <li><a class="active" href="netbooks">Netbooks</a></li>
      <li><a href="ipads-tablets-ereaders">iPads, tablets &amp; eReaders</a></li>
      <li><a href="desktop-pcs">Desktop PCs</a></li>
    </ul>
  </li>
  <li>
    <a href="photography">Photography</a>
    <ul class="sub-level sub-level-1">
      <li><a href="dslr">DSLR</a></li>
      <li><a href="compact-cameras">Compact Cameras</a></li>
    </ul>
  </li>
</ul>

Идея состоит в том, что мне нужно немедленно закрыть все подменю (используя slideUp(), чтобы jQuery записывал высоту, в противном случае при вызове slideDown() позжеанимация нервная), но мне нужно держать открытым подменю текущего пункта меню (который классифицируется как «активный»).

Я думал, что, потому что я закрываю все меню,а затем посмотрите, чтобы открыть определенное меню (также есть возможность для нескольких подменю), оно не кажется особенно эффективным - есть всегда лучший способ!

Answer 1

Не вдаваясь в подробности этого конкретного примера, вы спросили о том, как сделать селекторы более эффективными. Лучший способ сделать это - использовать id в своих тегах, и тогда вам даже не понадобится jQuery, просто document.getElementById(myid).

Классы удобны для организации вашего CSS, но для эффективности Javascript идентификаторы работают лучше всего.

Конечно, если вы действительно хотите повысить эффективность, вы бы тоже не занимались анимацией.

Вы можете подумать, что идентификаторы не будут работать в той структуре, которая у вас есть, но с идентификаторами можно сделать что-то вроде этого:

alevel1
  blevel1
    clevel1
alevel2
  blevel2
alevel3
  blevel3
    clevel3

Это означает, что вам нужно будет изменить идентификаторы, если вы вставляете вещи и отслеживаете уровень (a, b, c) и номер поддерева (1, 2, 3), не говоря уже о создании идентификаторов для использовать в селекторах. Вам также необходимо изменить идентификатор, чтобы пометить элемент active.

Вот jsfiddle, который показывает изменение идентификатора http://jsfiddle.net/V7MZ5/