Jquery / CSS – addClass to first:p of multiple div with specified class

Question

I'm using (trying to use) jQuery to add a class to the first paragraph of every div with class of ".djBio" My problem is that it's only adding the class to the first div.djBio, not all divs with that class. Here's the code. I am also using the fancy letter jquery plugin to add the drop cap to the first paragraph (which also is only applying to the first div.djBio, not all)

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

Thanks so much for your help!

Answer 1

You've stumbled over what everyone stumbles over at some point: :first doesn't really mean what you (at first) think it means. :first will only ever return (at most) one element. The best way I can think of doing your problem is using each():

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