Select sub element using cached selector (jQuery)

Question

This question is somewhat related to my inquiry, but doesn't quite cover what I need to understand:

I have this HTML:

<div id="myDiv">
    <img src="http://placekitten.com/g/200/200" />
</div>

I cached the DIV selector: var md = $('#myDiv');

How can I access the <img> sub element using the cached DIV selector?

For eg, something like:

md.('img').fadeOut();

or

$(md + ' img').fadeOut();

Community · Accepted Answer · 2017-05-23 12:27:21Z

2

You want to select your md jQuery object, then use either the find() or children() method to search its hierarchy for the elements "below" it:

var md = $('#myDiv');
//the next two lines do the same thing
md.find('img').fadeOut();
md.children('img').fadeOut();

Which is better for you? Well...this expounds on the differences between find() and children(), and the answers to this question give you some helpful performance metrics to help decide.

Please note, convention is to assign jQuery objects to variables prefixed with a "$": var $md = $('#myDiv');

CommunityBot

11 silver badge

answered Oct 24, 2014 at 19:55

Jeromy French

12.1k19 gold badges79 silver badges136 bronze badges

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

Comments

Amit Joki · Accepted Answer · 2014-10-25 02:06:51Z

1

You can use

The above as well as, filter can also be used.

md.find('img').fadeOut();

answered Oct 24, 2014 at 15:49

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

find() is correct, but I don't think filter() works like that: jsfiddle.net/o8Ldzo5z/1