我们如何将伪选择器应用于jQuery DOM变量？

Question

如果已经将body>div指定为一个变量，我们可以使用$('body>div:lt(2)')来获取在body中的前两个DIV标签。

var s = $('body>div')

我们还可以使用伪选择器或其他方法来获取前两个 DIV，以便参考变量吗？当然，s:lt(2) 不起作用。我能想到的是 $(s.slice(0,2))，但有没有更好的方法呢？

- shenkwen

Answer 1

您可以使用jQuery的.filter()方法，该方法允许使用选择器参数来过滤jQuery对象中选定的节点，以及其他功能。

var filtered = s.filter(':lt(2)');

请注意，这不会修改s的原始值，因此您将在s中拥有所有的div，并在filtered中拥有您筛选出来的div。

---

或者，正如你已经提到并在评论中讨论过的那样，你可以使用Array.prototype.slice。

var sliced = $(s.slice(0,2));

这种方法的性能比.filter()更快。然而，它可能会降低代码的可读性/可理解性。性能提升也很小，除非你在很短的时间内执行此操作数千次或更多。

可读性与性能之间是编程中经常进行的争论，最终您是唯一决定哪个对您自己的代码更有利。

- ajp15243

---

就性能而言，使用 slice() 更好，因为您可以依赖本地JS功能。 - AlexL

1+ ..我不明白为什么会被踩。它正好实现了楼主想要的功能，性能可能可以忽略不计。 - Josh Crozier

它被踩是因为楼主想要更好的方法。虽然这个答案在可读性方面提供了更好的方式，但与楼主建议的替代方案相比，这个变体在性能方面并不是最佳选择。 - AlexL

@AlexL 我非常怀疑过滤单个集合的性能差异会成为一个问题。 - charlietfl

@AlexL 它的性能更好，但差别会有那么大吗？我觉得 slice 不太易读。更好并不一定意味着更高的性能。这也满足了 OP 使用伪选择器的愿望。 - ajp15243

@AlexL 你在第一条评论中已经说过了。没有人在争论这一点。其他人正在比较这种性能提升的“价值”，与其他因素（如代码的可读性/易理解性）相比较。 - ajp15243