提高这个jquery选择器的效率

Question

我的布局类似于：

<li class="item">
  <div class="data">
    <div class="pics">
      <div class="pic"></div>
      <div class="pic"></div>
      <div class="pic"></div>
      <div class="btns">
        <div class="btn 1"></div>
        <div class="btn 2"></div>
      </div>
    </div>
  </div>
  <input type="hidden" value="" name="">
  <input type="hidden" value="" name="">
  <input type="hidden" value="" name="">
  <input type="hidden" value="" name="">
</li>

我想要做的是在点击其中一个按钮<li>时抓取class="btn"中的所有输入元素。我接近这个的方式实际上是抓住按钮的<li>父级，然后选择<input>元素......

var inputs = $($(element).parents('.item')[0]).children('input');

... element是其中一个被点击的按钮。

这种方法似乎可以做我想要的，但是有更好的方法吗？这似乎效率很低，但我没有关于性能的指标可以肯定地知道。有什么想法或建议吗？

更新

我去了jsPerf来测试我的选项：http://jsperf.com/jq-select。看起来我所拥有的比使用closest()更快，我不会猜到。

Answer 1

您不需要两次调用jQuery函数 - 您可以使用closest

$(element).closest('.item').children('input');

Answer 2

您可以尝试closest：

element.closest('.item').children('input');

在第一场比赛时停止。

Answer 3

我发现这更方便，因为它从父母开始：

$('li').has(this).find('input')

效果：http://jsperf.com/jquery-closest-vs-has - 请注意，最佳效果来自缓存$('li')。

但是，如果确实希望看到性能，我在http://jsperf.com/jq-select/3使用缓存的li has / children增强了您自己的JSPerf方法（大约比你的快33％）和一个仅限DOM的版本，这样你就可以看到海湾真正的巨大（没有真正优化，但仍然 7800％更快！）。

这强调了前提：当速度确实很重要时，请使用DOM。如果您正在使用JQuery，请选择您认为最方便易用的表达式。