Повторите нечетные стили даже после определенного div

Question

Я нахожусь в середине создания страницы новостей. Есть большие посты для самой последней записи каждого месяца, и на каждом нечетном/даже маленьком сообщении есть разные стили, использующие jQuery для выбора исключительно по классу (большие сообщения: «.blogPostBig», а меньшие - «.blogPost») :

$(function() { 
    $('.blogPost:odd').css({ 
         'border-left': '0', 
         'padding-right': '0' 
    }); 
    $('.blogPost:even').css({ 
         'border-right': '1px solid #4E4E4E', 
         'padding-left': '0' 
    }); 
}); 

Вот он работает, как он должен:

Однако, если есть только один небольшой пост до следующего большого поста, который вы можете s й в приведенном ниже примере, моделирование с использованием нечетного и четным перепуталось:

Я смотрел в использовании .after(), .prev(), .next (), но они, похоже, не помогают мне достичь того, чего я хочу.

Что я хотел бы знать, так это то, что если есть способ сбросить/применить нечетные/четкие стили для небольших постов, ПОСЛЕ крупного сообщения после каждого большого поста.

Заранее спасибо.

**** **** РЕДАКТИРОВАТЬ

Схема такова:

-big
-малые
-малые
-loadMore

ПРЕВРАЩАЕТСЯ В

-big
-small
-малых
-big
-малых
-малых
-малых
-big
-loadMore

т.д.

Answer 1

Предполагая, что все элементы в .blogPost/.blogPostBig являются братьями и сестрами, как это :

- big 
- small 
- small 
- small 
- big 
- small 

Вы должны быть в состоянии использовать nextUntil как вы итерацию по каждому элементу:

$('.blogPostBig').each(function(){ 
    smallPosts = $(this).next() // start with the first small post after this big post 
    .nextUntil('.blogPostBig') // stop when we hit another big post 
    .andSelf();     // add back the first small post 
    smallPosts.filter(':odd').css({color: 'red'}) 
    smallPosts.filter(':even').css({color: 'blue'}) 
}); 

Это немного грязный, но я не уверен, что есть способ селектор только (но я могу ошибаться).

Here's a jsFiddle для вас.