2

我正在制作新闻页面。每个月的最新帖子都有大帖子，每个奇数/偶数小帖子都有不同的样式，使用 jQuery 专门按类别选择（大帖子是“.blogPostBig”，较小的帖子只是“.blogPost”） ：

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

这是它应该如何工作的：

博客示例 1


但是，如果在下一个大帖子之前只有一个小帖子，您可以在下面的示例中看到，那么使用奇数和偶数的样式就会混乱：


博客示例 2

我已经研究过使用 .after()、.prev()、.next()，但它们似乎并不能帮助我实现我想要的。

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

提前致谢。

****编辑****

布局是这样的：

-big
-small
-small
-load更多

变成

-big -small -small
-big -small -small -small
-big -load更多





等等

4

1 回答 1

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

这有点混乱，但我不确定是否有一种仅限选择器的方式（但我可能是错的）。

这是一个 jsFiddle供您查看。

于 2013-10-10T02:33:07.387 回答