jQuery первый из селектора типа?

Question

Как бы я выбрал первый <p> элемент в следующем <div> с помощью jQuery?

<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, селектора :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-of-type" ).css( "font-size: 10px" );

Приведенный выше код находит первый абзац в элементе div, как указано @Denver, и изменяет его fonts-size на 10px

. Вот примеробъясняет еще больше о селекторе первого типа jQuery

Answer 6

$('div p').first()

Должно работать. Я думаю.