Я использую этот код для стилизации дерева элементов:
$('.js-toprow').each(function(index) {
if (index % 2 === 0) { // Even
$(this).css('background', '#ddd');
} else { // Odd
$(this).css('background', '#ff0000');
}
});
Здесь я пытаюсь добиться того, чтобы один элемент был четным, а другой - нечетным.Это работает просто отлично, за исключением того факта, что вокруг элемента 4 или 5 два последних элемента приобретают одинаковый цвет.взгляните на скриншоты.
Fiddle здесь: https://jsfiddle.net/865ytmkd/35/
Похоже, что код слайд-шоу перемещает элементы, в которых, вероятно, и заключается проблема.
Полный код:
jQuery(function ($) {
$("#jobshome").load("jobs/newest-jobs .js-toprow", function(){
//rotation speed and timer
var speed = 4000;
var run = setInterval(rotate, speed);
var slides = $('.js-toprow');
var container = $('#jobshome');
var elm = container.children(':first-child').prop("tagName");
var item_height = container.height();
var previous = 'prevabc'; //id of previous button
var next = 'nextabc'; //id of next button
slides.height(item_height); //set the slides to the correct pixel height
container.parent().height(item_height);
container.height(slides.length * item_height); //set the slides container to the correct total height
container.children(elm + ':first').before(container.children(elm + ':last'));
resetSlides();
//if user clicked on prev button
$('#buttonsabc a').click(function (e) {
//slide the item
if (container.is(':animated')) {
return false;
}
if (e.target.id == previous) {
container.stop().animate({
'top': 0
}, 1000, function () {
container.children(elm + ':first').before(container.children(elm + ':last'));
resetSlides();
});
}
if (e.target.id == next) {
container.stop().animate({
'top': item_height * -2
}, 1000, function () {
container.children(elm + ':last').after(container.children(elm + ':first'));
resetSlides();
}
);
}
//cancel the link behavior
return false;
});
//if mouse hover, pause the auto rotation, otherwise rotate it
container.parent().mouseenter(function () {
clearInterval(run);
}).mouseleave(function () {
run = setInterval(rotate, speed);
});
function resetSlides() {
//and adjust the container so current is in the frame
container.css({
'top': -1 * item_height
});
}
$('.js-toprow').each(function(index) {
if (index % 2 === 0) { // Even
$(this).css('background', '#f4f5f7');
} else { // Odd
$(this).css('background', '#ffffff');
}
});
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin
function rotate() {
jQuery('#nextabc').click();
}
});
1 
2 
3 
Еще один скриншот: https://i.stack.imgur.com/GnhHM.jpg