elements, not just the one you're selecting. With your new mark-up
you're better off doing this:
$(".insidepost ul + p")
//or
$(".insidepost p:first")
.addClass("caminfo")
.next('p').addClass("cambuy")
.next('p').addClass("cam..");
Looks a bit clearer to me and is safer in case you add other elements
before the paragraphs.
This is the first real possible use I've seen of the CSS3 nth-of-type
selector!
On Apr 29, 12:13 pm, Tobias <tobi...@gmail.com> wrote:
> Perfect. But just for future helpfulness of anyone coming across this
> post- I simplified my code above, it actually looks like
>
> > > <div class="insidepost">
>
> <iframe>Blah Blah Blah</iframe>
> <ul>
> <li>item 1</li>
> <li>item 2</li>
> <li>item 3</li>
> </ul>
>
> > > <p>paragraph 1</p>
> > > <p>paragraph 2</p>
> > > <p>paragraph 3</p>
> > > </div>
>
> As a consequence I need to use $(".insidepost p:nth-child(3)").addClass
> ("caminfo"); to get it to add that class to the FIRST paragraph. Not
> sure why it counts other items in the list of children. . . or maybe I
> don't quite understand how the child works - I thought it was just
> counting the P children inside the div.
>
> Anyway - Thanks Ricardo, appreciate the help.
>
> --Tobias
>
> On Apr 28, 11:11 pm, Ricardo <ricardob...@gmail.com> wrote:
>
> > That's because eq() filters the whole collection of Ps from all DIVs.
> > Use nth-child instead (indexes start at 1 instead of 0):
>
> > $(".insidepost p:nth-child(1)").addClass("cambottomline");
> > $(".insidepost p:nth-child(2)").addClass("cambuy");
>
> > cheers,
> > - ricardo
>
> > On Apr 28, 10:15 pm, Tobias <tobi...@gmail.com> wrote:
>
> > > Hello - My basic code is something like
>
> > > <div class="insidepost">
> > > <p>paragraph 1</p>
> > > <p>paragraph 2</p>
> > > <p>paragraph 3</p>
> > > </div>
>
> > > <div class="insidepost">
> > > <p>paragraph 1</p>
> > > <p>paragraph 2</p>
> > > <p>paragraph 3</p>
> > > </div>
>
> > > I was hoping to use
>
> > > $(".insidepost p:eq(1)").addClass("cambottomline");
>
> > > $(".insidepost p:eq(2)").addClass("cambuy");
>
> > > Only works on the first div though. Any suggestions for selecting the
> > > same certain P in each div?
>
> > > Thank you,
> > > Tobias
No comments:
Post a Comment