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 。看来我所拥有的比使用 closest() 更快，这是我没想到的。

Answer 1

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

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