Question

It must be late… Given the following HTML, how would one select all of the paragraphs except for the first paragraph inside each of the div.thePosts?

I have tried:

$('.thePost').children('p:gt(0)')

and

$('.thePost p:gt(0)')

and

$('.thePost > p:gt(0)')

All of which work fine for the very first div.thePost but end up selecting all other <p> tags within any other div with the class of thePost.

<div id="contentmiddle">

<div class="thePost">

  <h1>...</h1>

  <h3>...</h3>

  <span>...</span> 

  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>

</div><!-- /thePost -->

<div class="thePost">

  <h1>...</h1>

  <h3>...</h3>

  <span>...</span> 

  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>

</div><!-- /thePost -->

</div>​<!-- /contentmiddle -->

Answer 1

:first-of-type is not a jQuery selector, so unless a browser supports it natively in CSS, the solutions using :first-of-type won’t work.

If you need to support older browsers (IE < 9), you need to use next siblings selector ~ instead:

$('.thePost > p ~ p')