选择奇数/偶数子div

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

 
 
 Page 1 content 
 
 
 
 Page 2 content 
 
 
 
 Page 3 content 
 
 
 
 Page 4 content 
 
 
 
 Page 5 content 
 
  

我需要做的是，最好使用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的索引意味着，直观地说：甚至选择匹配集合中的第一个元素，第三个元素等。