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

Select sub element using cached selector (jQuery)

本文关键字：选择 元素 jQuery 缓存 选择器      更新时间：2023-09-26

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

jQuery缓存选择器

我有这个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

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

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

哪个对你更好？好这阐述了find（）和children（）之间的区别，这个问题的答案为您提供了一些有用的性能指标来帮助您做出决定。

请参阅find()和children()的工作示例http://jsfiddle.net/o8Ldzo5z/4/

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

您可以使用

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

上述以及filter也可以使用。

md.find('img').fadeOut();
相关文章：