强制CSS重新渲染

Question

我有些文章的风格是这样

padding-bottom: 125px
padding-top: 125px
border-bottom: 1px solid rgba(0,0,0,0.1)
&:first-of-type
    padding-top: 0
    &:last-of-type
        padding-bottom: 0
            border-bottom: none

我有一个脚本，当单击一个类别时，该脚本会导致所有没有相似类的文章淡出

// Category Switching
$('.cats span').click(function(){
    console.log('click');
    var cat = $(this).attr('class');
    if(cat == 'all'){
        $('.articles').find('article').fadeIn();
    } else {
        $('.articles').find('article:not(.'+cat+')').fadeOut();
    }
});

很明显，发生的事情是第一篇文章可能不再是第一篇文章，因此，帖子顶部的填充，甚至对于底部填充的最后一篇帖子，也需要删除，但是由于CSS已经渲染，所以它不知道DOM发生了变化。

运行此脚本后，如何获取CSS重新评估DOM并查看这些更改？

Answer 1

您可以选择所有可见的元素，因此，在执行fadeIn和fadeOut ，可以选择所有可见的.articles 。

docs：

http://api.jquery.com/visible-selector/

然后，您可以选择第一个和最后一个dom元素，并为它们提供.last_article and .first_article` css类。

（例如，这些类应有顶部和底部填充）