Question

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

我事先不知道目标 obj 中的孩子，即：

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 中选择目标的方法，但我事先并不知道何时使用 .find 和何时使用 .filter 。

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

我提出的是：

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

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

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

Answer 1

我提出的是：

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

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

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

Answer 2

您可以使用其他元素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));    
};

Answer 3

Ties with the fastest:

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

Answer 4

您可以从新的<div/>开始，然后将obj添加到其中，然后进行搜索：

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

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

Answer 5

我会去换行＆gt;找到解决方案，因为它是最可读的（我怀疑你需要进一步优化性能）。但是性能方面，你应该只运行你需要的方法，直到你需要：

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

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

5 个答案: