Выберите нечетные/четные дочерние divs

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 является добавление классов к внутрипартийной большинства дивы, такие как page-left или page-right. Например, страницы 1, 3 и 5 получат page-left, а страницы 2 и 4 получат page-right. Может быть больше (или меньше), чем 5 страниц. Я попытался использовать кучу разных сценариев четных/нечетных селекторов, но, похоже, не может заставить его работать правильно.

Может кто-нибудь указать мне в правильном направлении?

Спасибо!

Answer 1

Используйте: нечетные и: даже селекторы.

Например:

$('.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

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

Answer 4

Попробуйте :odd и :even селекторы:

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

Вы также можете использовать :nth-child воспользоваться повышает производительность, потому что это встроенный селектор:

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

Answer 5

Попробуйте использовать nth-child(even), как описано здесь: http://www.w3.org/Style/Examples/007/evenodd.en.html

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

Answer 6

Использование «: нечетные 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 означает, что встречно-интуитивно: даже выбирает первый элемент, третий элемент, и т. д. в пределах согласованного набора.