Select elements in cached jQuery object

Question

Assume we were passed the following element:

var cachedElement = $('<div><p>Some text</p></div><aside>Some more text</aside>');

If I know what is in the element, I can easily traverse it. For example, to find the div I can use:

cachedElement.filter('div');

and to find a child element I can use:

cachedElement.find('p');

What if I do not know the structure of the cached element. How can I search for an element, which can be parent, child or both.

I was wondering if there is a method that can do that for me. I do not want to wrap the element in divs and search with .find().

My best solution is the following inefficient (and ugly) selector:

cachedElement.filter('selector_string').add(cachedElement.find('selector_string')).eq(0)

In my particular case i need only the first element.

Any ideas? Thanks

Are you asking how to return the first html element in a string? — FiveTools
– FiveTools, Commented Jun 18, 2011 at 1:27
@FiveTools, i need to find an element in a jQuery object. I need a function similar to jQuery DOM selector, that i can use on a jQuery object which is not part of the DOM. — Emil
– Emil, Commented Jun 18, 2011 at 1:33

Felix Kling · Accepted Answer · 2011-06-18 01:49:01Z

2

I don't see any reason why you would not want to wrap the content in a div:

$('<div />').append(cachedElement).find('selector_string').eq(0);

You could do something like:

cachedElement.find('*').andSelf().filter('selector_string').eq(0);

This will select all descendants of cachedElement and add cachedElement. So you would have selected all the elements in one jQuery object. But that seems rather inefficient to me as well.

edited Jun 18, 2011 at 1:49

answered Jun 18, 2011 at 1:27

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Emil Over a year ago

I would like to avoid wrapping it in div.

Emil Over a year ago

Thanks Felix. I was not sure if there was some hybrid between .filter() and .find()

Felix Kling Over a year ago

@Emil: No, there isn't. There are other ways (see my updated answer) but they are not necessarily better. Wrapping the content in a new element is quite good approach imo. I don't see a reason why you wanted to avoid that.

Emil Over a year ago

I am trying to avoid wrapping it in divs because i am doing multiple manipulations to the cachedElement. I am getting meta tags from data attributes, adjusting css, html and text before adding the element to the DOM. It is working, but the code is hard to scan. I was hoping that there was a handy selector I can use.

Felix Kling Over a year ago

@Emil: I see. Well, sometimes it is better to write more verbose code than trying to keep everything compact. Go for the most readable version.

user113716 · Accepted Answer · 2011-06-18 02:11:48Z

1

You could take your original approach, and make it into a plugin if you wanted something a little cleaner:

(function( $ ) {
    $.fn.inclusiveFind = function( sel ) {
        return this.filter( sel ).add( this.find( sel ) );
    } 
})( jQuery );

Then call it like any other method:

var cachedElement = $('<div><p>Some text</p></div><aside>Some more text</aside>');

var div = cachedElement.inclusiveFind( 'div' ).eq(0);
var p = cachedElement.inclusiveFind( 'p' ).eq(0);

You may get a performance improvement by using the jQuery.merge()^[docs] method:

(function( $ ) {
    $.fn.inclusiveFind = function( sel ) {
        return $.merge( this.filter( sel ), this.find( sel ) );
    } 
})( jQuery );

answered Jun 18, 2011 at 2:11

user113716

323k64 gold badges454 silver badges441 bronze badges

Collectives™ on Stack Overflow

Select elements in cached jQuery object

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related