从另一个未知 jQuery 对象中选择对象的最佳方法答案

【问题标题】：Best method to select an object from another unknown jQuery object从另一个未知 jQuery 对象中选择对象的最佳方法
【发布时间】：2014-07-14 07:59:00
【问题描述】：

假设我有一个存储在名为 obj 的变量中的 jQuery 对象/集合，它应该包含一个 DOM 元素，其 id 名为 target。

我事先不知道target是否会是obj中的child，即：

obj = $('<div id="parent"><div id="target"></div></div>');

或者如果obj 等于目标，即：

obj = $('<div id="target"></div>');

或者如果target是obj内的顶级元素，即：

obj = $('<div id="target"/><span id="other"/>');

我需要一种从obj中选择target的方法，但是我事先不知道什么时候用.find，什么时候用使用 .filter.

从 obj 中提取 target 的最快和/或最简洁的方法是什么？

我想出的是：

var $target = obj.find("#target").add(obj.filter("#target"));

更新我正在向 JSPERF 测试页面添加解决方案，以查看哪个是最好的。目前我的解决方案仍然是最快的。这是链接，请运行测试，以便我们获得更多数据：

http://jsperf.com/jquery-selecting-objects

【问题讨论】：

问题：你手里有目标ID，那为什么还要从一个对象中过滤或查找呢？您可以使用 $("#target") 或 document.getElementById("target").(Id 对于页面 ryt 是唯一的) 只是出于好奇而询问。
$obj.find('#target').andSelf().filter('#target'); ?
@Jashwant 还是比我的方法慢一点。见：jsperf.com/jquery-selecting-objects/12
是的，我已经检查过了。因此，评论。它不是那么慢，而且很干净。

标签： jquery performance jquery-selectors cross-browser jquery-traversing

【解决方案1】：

我想出的是：

var $target = obj.find("#target").add(obj.filter("#target"));

目前我的解决方案仍然是最快的。这是链接，请运行测试，以便我们获得更多数据：

http://jsperf.com/jquery-selecting-objects

【讨论】：

【解决方案2】：

Ties with the fastest:

var $target = obj.find('#target').addBack('#target')

【讨论】：

是的，但是这个版本没有找到父元素的“孙子”元素，只有直接子元素。改版本使用“find”其实还是慢了一点，见：jsperf.com/jquery-selecting-objects/12
更新了一个与您并驾齐驱的解决方案；似乎也更具可读性。
清洁，解决了问题，并且确实与我的解决方案并驾齐驱。干得好:)
很好 - 很有趣！感谢您的提问。

【解决方案3】：

您可以将wrap 集合与另一个元素一起使用并使用find 方法：

obj.wrap('<div/>').parent().find('selector');

如果您担心性能问题，那么一开始就不应该使用 jQuery。 Vanilla JavaScript 总是比 jQuery 快。

另一种方法是使用querySelector 或querySelectorAll 方法：

function find(html, selector) {
   var temp = document.createElement('div');
   temp.innerHTML = html;
   return [].slice.call(temp.querySelectorAll(selector));    
};

【讨论】：

谢谢！这确实比进行 2 次查询要快吗？
谢谢，我刚刚做了，我得到的结果表明 2 个查询确实更快：jsperf.com/jquery-selecting-objects
@Yosi 这很有趣，wrap 慢得多。

【解决方案4】：

您可以从一个新的<div/> 开始并在其上附加obj，然后进行搜索：

$( '<div/>' ).append( obj ).find( '#target' );

在这三个中，this 是第二快的。

【讨论】：

【解决方案5】：

我会选择 wrap > find 解决方案，因为它是最易读的（我怀疑您是否需要进一步优化性能）。但在性能方面，你应该只运行你需要的方法，直到你需要：

var getTarget = function(b){
  for(i=0; i<b.length; i++){
    if(b[i].id === 'target'){
      return $(b[i]);
    } else {
      var $target = b.find('#target');
      if($target.length > 0){ return $target }
    }
  }
}

var $target = getTartget( obj );

http://jsperf.com/jquery-selecting-objects/6

【讨论】：