JQuery сначала из селектора типов?

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

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

Ответ 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)):

Ответ 2

$('div p:first')

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

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

Ответ 3

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

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

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

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

Ответ 4

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

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

Ответ 5

$('div p').first()

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

Ответ 6

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

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

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

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