jquery - 如何扩展存储在变量中的 jQuery 选择器？

Question

我有一个存储在变量中的 jQuery 选择器，如下所示:

var myVariable = $( ".js-selector" );

我想知道是否以及如何使用此变量来选择此元素的子元素，而不是编写:

$( ".js-selector .some-child" );

我该怎么做？

我还想知道即使我使用其他一些选择器扩展它，是否可以通过使用缓存选择器获得一些性能优势？

Answer 1

您可以使用find()在 jQuery 返回的对象上获取变量中对象的后代。

var descendants = myVariable.find(".some-child");

还有一种语法可以通过使用选择器 jQuery( selector [, context ] ) 传递上下文来使用。 。虽然这被转换为查找调用，所以最好使用上面的调用。

var descendants = $(".some-child", myVariable);

使用兑现的对象将为您提供更好的性能，但可能很少有人注意到它。您可以使用这个jspref网站来比较性能。

Live performance test on jspref

我已经进行了实时 jspref 测试，以比较使用父级作为对象和在选择器中使用父级的选择器性能。此测试显示了第一种方法，其中父后代选择器比我们首先在对象中获取父对象并使用 find 来获取后代要慢 28% 左右。