Jquery/CSS - addClass đầu tiên: p của nhiều div với lớp được chỉ định

Question

Tôi đang sử dụng (cố gắng sử dụng) jQuery để thêm một lớp vào đoạn đầu tiên của mỗi div với lớp ".djBio" là nó chỉ thêm lớp vào div.djBio đầu tiên, không phải là tất cả số div với lớp đó. Đây là mã. Tôi cũng đang sử dụng thư plugin jquery ưa thích để thêm nắp thả để đoạn đầu tiên (mà cũng chỉ được áp dụng cho div.djBio đầu tiên, không phải tất cả)

jQuery(function($){ 
    $('.servicesContent p:first, .about-usContent p:first, .djBio p:first').fancyletter().addClass('firstP'); 
}); 

Cảm ơn rất nhiều sự giúp đỡ của bạn!

Answer 1

Bạn đã vấp phải những gì mọi người tình cờ gặp phải tại một số điểm: :first không thực sự có nghĩa là bạn (lúc đầu) nghĩ điều đó có nghĩa là gì. :first sẽ chỉ bao giờ trở lại (tối đa) một phần tử. Cách tốt nhất tôi có thể nghĩ ra làm vấn đề của bạn đang sử dụng each():

$(function() { 
    $(".servicesContent, .about-usContent, .djBio").each(function() { 
    $(this).find("p:first").addClass("..."); 
    }); 
}); 

Answer 2

Bạn có thể viết lại đoạn code như thế này để thêm lớp để tất cả các thẻ p đầu tiên:

$('.servicesContent, .about-usContent, .djBio').each(function() { 
    $(this).find('p:first').fancyletter().addClass('firstP'); 
}); 

Vấn đề với mã của bạn là nó chỉ tìm thấy thể hiện đầu tiên của thẻ ap trong một phần tử với lớp đã cho.

Answer 3

Khi bạn đã phát hiện ra, :first selector khớp với phần tử đầu tiên của công cụ chọn mà bạn áp dụng nó và sẽ chỉ trả lại (tối đa) một phần tử.

Bạn cần sử dụng :first-child selector, sẽ khớp với bất kỳ phần tử nào là con đầu tiên của cha mẹ. (Lưu ý rằng nếu có một yếu tố khác trước khi p đầu tiên, nó vẫn không hoạt động)