jquery中选择器之间的区别

Question

在今天之前我认为这两个选择器是相同的，我认为它们执行相同的操作，但今天我遇到问题，他们的行为不同。我想知道这些选择器之间有什么区别。 demo

$('.test p:first');

$('.test').find('p:first');

Answer 1

find将为调用它的集合中存在的每个元素执行传递的选择器。所以，看看你的代码：

$('.test p:first')

$('.test p:first')已执行。这将返回单个p元素，该元素是所有.test元素中的第一个元素。

相反：

$('.test').find('p:first')

执行第一个$('.test')。这将返回3个.test元素（基于你小提琴中的html）。然后在此集合上调用find，并对这3个元素中的每一个执行查找。因此，对于每个 .text，它会找到第一个p。结果是3个元素。

Answer 2

差异基于返回的元素

$('.test').find('p:first') - 在p:first上返回.test。这将返回列表并对列表中的每个元素进行过滤。

$('.test p:first') - 从所有p:first中匹配的所有p返回.test。这将从列表中返回单个元素和过滤器列表。

Answer 3

我的猜测是$('.test p:first')选择p的所有元素的第一个.test。

$('.test').find('p:first')使用p选择每个元素的第一个.test。