使用缓存选择器（jQuery）选择子元素

Question

这个问题与我的询问有些相关，但并不能完全涵盖我需要理解的内容：

jQuery caching selectors

我有这个HTML：

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

我缓存了DIV选择器：var md = $('#myDiv');

如何使用缓存的DIV选择器访问<img>子元素？

例如：

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

或

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

jsFiddle

Answer 1

您想要选择md jQuery对象，然后使用find()或children()方法在其层次结构中搜索“下面”的元素：

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

哪个更适合你？嗯......这在the differences between find() and children()上有所阐述，this question的答案为您提供了一些有用的性能指标来帮助您做出决定。

查看working example of find() and children() at http://jsfiddle.net/o8Ldzo5z/4/

请注意，惯例是将jQuery对象分配给前缀为“$”的变量：var $md = $('#myDiv');

Answer 2

您可以使用

• find // generic method for finding descendants
• children // for immediate children

以上以及filter也可以使用。

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