jQuery第一个类型选择器？

Question

如何使用jQuery选择以下<p>中的第一个<div>元素？

<div>
    <h1>heading</h1>
    <p>How do I select this element with jQuery?</p>
    <p>Another paragraph</p>
</div>

Answer 1

假设您已经引用了div：

$(yourDiv).find("p").eq(0);

如果第一个p始终是div的直接孩子，则可以使用children代替find。

一些替代方案包括：

$(yourDiv).find("p:eq(0)"); //Slower than the `.eq` method
$(yourDiv).find("p:first"); 
$(yourDiv).find("p").first() //Just an alias for `.eq(0)`

请注意，eq方法始终是执行此操作的最快方法。以下是eq方法的quick comparison，:eq选择器和:first选择器的结果（我没有使用first方法，因为它只是一个别名为eq(0)）：

Answer 2

$('div p:first')

如果没有这个无用的句子，答案太短了。

修改 这绝对是一个缓慢的选择。在查看了Jame的速度测试之后，看起来jQuery选择器在从css选择器中退回时效果最好。

Answer 3

$（“div p”）。first（）;

或$（'div p：first'）;

参考：http://api.jquery.com/first/

请记住，first（）只匹配一个元素，：first-child选择器可以匹配多个：每个父元素一个。

Answer 4

你几乎知道答案（来自你的帖子标题）。 jQuery中有一个名为:first-of-type的选择器。用它来自动查找和添加类到第一个p标签，如下所示：

$("div p:first-of-type").addClass('someClass');

Answer 5

$('div p').first()

应该有效。我想。

Answer 6

这应该有效

$( "div p:first-of-type" ).css( "font-size: 10px" );

以上代码在@Denver指向的div中找到第一段，并将其fonts-size更改为10px

以下示例更详细地介绍了jQuery first-of-type selector