选择奇数/偶数子div

Question

我正试图从代码服务器端动态创建一本"书".该部分工作正常,并生成类似于以下内容的输出:

<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>

我需要做的是,最好使用jQuery将类添加到最内层的div中,例如page-left或page-right.例如,第1页,第3页和第5 page-left页将获得,而第2页和第4页将获得page-right.可能还有更多(或更少)5页.我尝试使用一堆不同的偶数/奇数选择器方案,但似乎无法让它正常工作.

有人能指出我正确的方向吗？

谢谢!

Answer 1

使用:odd和:even选择器.

例如:

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

Answer 2

这应该工作.

$('#pagesContainer').children('.pageContent').each(function(index)
{
    $(this).addClass(index % 2 ? 'page-right' : 'page-left');
});

在jsFiddle演示.