Выберите нечетные / четные дочерние элементы

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

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

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

Answer 5

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

Answer 6

Это то, что вы пытаетесь достичь?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 означает, что, интуитивно, даже: выбирается первый элемент, третий элемент и т. Д. В пределах соответствующего набора.

Answer 7

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

Answer 8

Использование ': нечетное and: четные селекторы

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

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