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()时动画是跳跃的），但我需要继续打开当前菜单项的子菜单（被归类为“活动”）。

我在想，因为我正在关闭所有菜单，然后重新打开一个特定的菜单（也有可能有多个子菜单），它看起来效率不高 - 总是< / em>更好的方式！

Answer 1

在没有详细讨论这个特定示例的情况下，您询问了如何提高选择器的效率。最好的方法是在您的代码中使用id，然后您甚至不需要jQuery，只需document.getElementById(myid)。

类很适合组织你的CSS，但是为了提高Javascript的效率，id工作得最好。

当然，如果你真的想要效率，你也不会做那么多动画。

您可能认为ID不适用于您拥有的结构，但可以使用这样的ID执行某些操作：

alevel1
  blevel1
    clevel1
alevel2
  blevel2
alevel3
  blevel3
    clevel3

这意味着如果插入内容，则需要更改ID，并跟踪级别（a，b，c）和子树编号（1,2,3），更不用说构建ID了在选择器中使用。您还需要更改ID以标记active元素。

这是一个显示更改ID http://jsfiddle.net/V7MZ5/

的jsfiddle

jQuery选择器优化

1 个答案: