强制CSS重新渲染

Question

I have some articles that are styled is sass as such

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

I have a script that causes all articles that do not have a similar class to fadeout when a category is clicked like so

// 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();
    }
});

What happens, obviously, is that what was the first article may no longer be the first article, therefore that padding at the top of the post, and even so for the last post with the padding on the bottom, needs to be taken off, but since the CSS is already rendered it does not know that there has been a change in the DOM.

How can I get the CSS to reevaluate the DOM and see these changes after this script runs?

Answer 1

You can select all the visible elements, So after you do your fadeIn and fadeOut you can select all .articles which are :visible.

docs :

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

You can then select the first and last dom elements and give them a .last_article and .first_article` css classes.

(those classes should have your top and bottom padding for example)