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

Posted 2023-03-05

【中文标题】如何扩展存储在变量中的 jQuery 选择器？

【英文标题】：How to extend a jQuery selector that is stored in a variable?

【发布时间】：2015-07-19 09:17:36

【问题描述】：

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

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

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

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

我该怎么做？

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

【参考方案1】：

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

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

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

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

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

Live performance test on jspref

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

【讨论】：

谢谢！另外，如果有人知道性能优势，请回答！ :)

我现在对 jspref 进行了测试。使用部分缓存的选择器比写出整个选择器快 14%。只是有趣的知道。