jquery - 提高这个 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。似乎我所拥有的比 using 更快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方法（比您的方法快约 33%）和仅 DOM 版本增强了您自己的 JSPerf，只是所以你可以看到真正的鸿沟有多大（没有真正优化，但仍然快了7800% ！）。

这强调了一个前提：当速度真的很重要时，使用 DOM。如果您使用的是 JQuery，请选择您认为最方便且易于使用的表达式。