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的演示。

Answer 3

尝试:odd和:even选择器：

$('.pageContent:odd').addClass('odd');

您还可以使用:nth-child来充分利用性能提升，因为它是内置选择器：

$('.pageContent:nth-child(odd)').addClass('odd');

Answer 4

$('.pageContent').each(function(i,t){
 var addClass = i % 2 == 0 ? 'odd' : 'even';
 $(t).addClass(addClass);
})

Answer 5

尝试使用此处所述的nth-child(even)：http://www.w3.org/Style/Examples/007/evenodd.en.html

.pageContent:nth-child(even) { /* Something amazing */ }

Answer 6

使用'：odd and：even`选择器

http://api.jquery.com/category/selectors/

     $('.pageContent:odd').addClass('oddClass')

Answer 7

$(".pageContent:odd").addClass("oddPage");
$(".pageContent:even").addClass("evenPage");

Answer 8

这是你想要达到的目标吗？ http://jsfiddle.net/Sf7AD/3/

$('#pagesContainer > div:even').addClass('page-left');
$('#pagesContainer > div:odd').addClass('page-right');

不是因为元素是0索引的，:even将反直觉地选择第一，第三，第五等元素

来自文档 http://api.jquery.com/even-selector/

特别要注意，基于0的索引意味着，反直觉地：甚至选择第一个元素，第三个元素，在匹配的集合中等等。

选择奇数/偶数子div

8 个答案: