Best method to select an object from another unknown jQuery object

Question

Lets say I have a jQuery object/collection stored in a variable named obj, which should contain a DOM element with an id named target.

I don't know in advance if target will be a child in obj, i.e.:

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

or if obj equals target, i.e.:

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

or if target is a top-level element inside obj, i.e.:

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

---

I need a way to select target from obj, but I don't know in advance when to use .find and when to use .filter.

What would be the fastest and/or most concise method of extracting target from obj?

What I've come up with is:

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

---

UPDATE I'm adding solutions to a JSPERF test page to see which one is the best. Currently my solution is still the fastest. Here is the link, please run the tests so that we'll have more data:

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

Answer 1

Ties with the fastest:

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

Answer 2

You can wrap the collection with another element and use the find method:

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

If you're worried about performance, you should not use jQuery in the first place. Vanilla JavaScript is always faster than jQuery.

An alternative is using the querySelector or querySelectorAll method:

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

Answer 3

I would go for the wrap > find solution because it is the most readable (and I doubt you need to optimise performance any further). But performance wise, you should be running only the methods you need, until you need:

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

Answer 4

What I've come up with is:

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

Currently my solution is still the fastest. Here is the link, please run the tests so that we'll have more data:

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

Answer 5

You can start off with a fresh <div/> and append obj to it, then do the search:

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

Of the three, this is the second fastest.