Is this the best way to query an element and its children?

Question

I'm trying to query an element and its children to find ID's that begin with a particular string.

var foundIDs = containerElement.find('[id^=something]').andSelf().filter('id^=something');

The find() method only searches descendants so I thought I'd try andSelf() . However, andSelf() does not take a selector. This means that the container element is included regardless of whether it matches the find query or not and I then have to perform a secondary filter() on it to remove the container element if it didn't match after all.

I attempted to put andSelf() before the find() but it didn't seem to pick up the container element into the stack.

containerElement.andSelf().find('[id^=something]');

Is there any better way to achieve what I'm doing?

Answer 1

Just off the top of my head (not tested):

var foundIDs = containerElement
                     .filter('id^=something')
                     .add(containerElement.find('id^=something'));

This isn't that much more efficient than your first effort, but I think it's a little cleaner.

Answer 2

containerElement.find('*').andSelf().filter('[id^=something]');

Answer 3

I know you've already accepted an answer, but I'll throw this one out there anyway.

var foundIDs = containerElement.wrap('<div>')             // Wrap
                               .parent()                  // Traverse up
                               .find('[id^=something]');  // Perform find

containerElement.unwrap();  // DOM is untouched

Because you are unwrapping the containerElement before the function is complete, the DOM remains untouched (in case you were wondering).

I verified it with livequery plugin, which never detects the new div .

If you log the ID (or whatever) of foundIDs, you'll see that the top level is your containerElement (assuming it matched the .find() criteria.

console.log( foundIDs.attr('id') );  // Log the ID of the root element.

---

EDIT:

With regard to testing, I performed a 1,000 iteration loop on both versions against a containerElement with only 2 nested elements.

I only tested in Safari on Mac.

The accepted answer was around 7 times faster.

If I added 100 nested elements, the gap closed to less that 2 times faster.

Here's the trouble. Both versions returned 0 elements if the containerElement didn't match. I'm not sure why this is.

Answer 4

This one has better performance than my other answer, but you lose the chaining ability that your accepted answer offers.

    // Do a typical find.
var found = containerElement.find('[class^=something]');

    // Test the containerElement directly,
    //    and push it into the 'found' object if it matches.
if( containerElement.is('[class^=something]') ) found.push(containerElement);