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

Question

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

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

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

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

我该怎么做？

我还想知道如果我使用缓存选择器获得一些性能优势，即使我将其与其他选择器一起扩展？

Answer 1

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

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

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

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

使用兑现对象可以提供更好的性能，但可能很少注意到它。您可以使用此jspref网站来比较效果。

Live performance test on jspref

我已经进行了实时jspref测试，用于比较使用parent作为对象和使用parent in selector的选择器性能。此测试显示了第一种方法，如果我们首先获取对象中的父级并使用find获取后代，那么父级后代选择器的速度要慢约28％。