在某个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'
    });
});

以下是它应该如何运作：

但是，如果在下一个大帖子之前只有一个小帖子，你可以在下面的例子中看到，使用奇数和偶数的样式搞砸了：

我已经研究过使用.after（）,. prev（）,. next（），但它们似乎无法帮助我实现我想要的目标。

我想知道的是，如果有一种方法可以重置/应用小帖子的奇数/偶数样式，在每个大帖子之后的大帖子之后。

提前致谢。

**** **** EDIT

布局如下：

-big
- 小事 - 小事 -loadMore

转入

-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让您退房。