jQuery đầu tiên của bộ chọn loại?

Question

Làm cách nào để chọn phần tử <p> đầu tiên trong <div> sau đây với jQuery?

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

Answer 1

Giả sử bạn có một tham chiếu đến div đã:

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

Nếu p đầu tiên sẽ luôn là một đứa trẻ trực tiếp của div, bạn có thể sử dụng children thay vì find.

Một số lựa chọn thay thế bao gồm:

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

Lưu ý rằng phương pháp eq sẽ luôn là cách nhanh nhất để làm điều này. Dưới đây là kết quả của một quick comparison của eq phương pháp, :eq selector và :first selector (Tôi không bận tâm với phương pháp first kể từ khi nó chỉ là một bí danh của eq(0)):

Answer 2

$('div p:first') 

câu trả lời đã quá viết tắt mà không có câu vô dụng này.

Chỉnh sửa Đây chắc chắn là tùy chọn chậm. Sau khi nhìn vào kiểm tra tốc độ của Jame, có vẻ như bộ chọn jQuery hoạt động tốt nhất khi chúng quay trở lại với bộ chọn css.

Answer 3

$('div p').first() 

Nên hoạt động. Tôi nghĩ.

Answer 4

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

hoặc $ ('div p: first');

tham khảo: http://api.jquery.com/first/

Hãy ghi nhớ rằng đầu tiên() chỉ khớp với một yếu tố duy nhất,: selector first-child có thể phù hợp với nhiều hơn một: một cho mỗi phụ huynh.

Answer 5

Bạn hầu như biết câu trả lời (từ tiêu đề bài đăng của mình). Có một bộ chọn trong jQuery được gọi là :first-of-type. Sử dụng nó để tìm và thêm class cho thẻ p đầu tiên tự động, như vậy:

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

Answer 6

này nên làm việc

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

Đoạn mã trên tìm thấy đoạn đầu tiên trong div như @Denver chỉ và thay đổi nó fonts-size-10px

Dưới đây là một ví dụ giải thích thậm chí thêm về jQuery first-of-type selector