Question

I’m trying to dynamically create a “book” from code server-side. That part’s working fine, and generating output similar to the following:

<div id="pagesContainer">
    <div class="pageContent">
         <div>
             Page 1 content
         </div>
    </div>
    <div class="pageContent">
         <div>
             Page 2 content
         </div>
    </div>
    <div class="pageContent">
         <div>
             Page 3 content
         </div>
    </div>
    <div class="pageContent">
         <div>
             Page 4 content
         </div>
    </div>
    <div class="pageContent">
         <div>
             Page 5 content
         </div>
    </div>
</div>

What I need to do, preferably using jQuery is add classes to the inner-most divs such as page-left or page-right. For example, pages 1, 3 and 5 would get page-left while pages 2 and 4 would get page-right. There may be more (or less) than 5 pages also. I’ve tried using a bunch of different even/odd selector scenarios, but can’t seem to get it to work correctly.

Can someone point me in the right direction?

Thanks!

Answer 1

Use the :odd and :even selectors.

For example:

$('.pageContent:odd').addClass("page-left")
$('.pageContent:even').addClass("page-right")