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 всегда будет самый быстрый способ сделать это. Вот результаты quick comparison из eq метода, :eq селектора и :first селектора (я не заморачиваться с методом first, так как это всего лишь псевдоним eq(0)):

Answer 2

$('div p:first') 

ответ был слишком короткий для публикации без этого бесполезного предложения.

Редактировать Это определенно медленный вариант. Посмотрев на тест скорости Джеймса, похоже, что селектора jQuery работают лучше всего, когда они переключаются с селекторов css.

Answer 3

$('div p').first() 

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

Answer 4

$ ("div p"). First();

или $ ('div p: first');

Ссылка: http://api.jquery.com/first/

Имейте в виду, что первый() соответствует только один элемент, то селектор: первый-ребенок может соответствовать более чем одному: один для каждого родителя.

Answer 5

Вы почти знаете ответ (из вашего заголовка сообщения). В jQuery есть селектор, который называется :first-of-type. Используйте его, чтобы найти и добавить класс к первому р теге автоматически, например, так:

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

Answer 6

Это должно работать

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

Вышеприведенный код находит первый абзац в DIV, как @Denver заострены и изменены его fonts-size к 10px

Вот пример, объясняющий еще больше о jQuery first-of-type selector