Visible nth child on each click - missing something
<p>I'm really close with this but am missing something to get it to work right. I've set up  a <a href="http://420dev.com/_lab/" rel="nofollow">test page here</a>.</p>

<p>When hovering over the first filters group and click on Naming &amp; Voice, it filters properly and the margins on the image placeholders are all correct. If you then click on Digital (without resetting the filter), the filter still works but the margins are messed up so that the first row only has 3 images instead of 4.</p>

<p>I'm not sure what I need to add to the code to get the margins to be set correctly each time the set is filtered through. Or more specifically, have it set so that every fourth item is getting no margin.</p>

<p>Here's the JS code:</p>

<pre><code>$(document).ready(function(){



//WORK OVERVIEW FILTERS
$('.nav-secondary.filters .section-inner').each(function(){
    //NAV REVEAL ON HOVER
    var conf = {
        over: function() {
            $(this).find('ul.filter-list,.reset').slideDown(250,'swing');
        },
        timeout: 25,
        out: function() {
            $(this).find('ul.filter-list,.reset').slideUp(250,'swing');
        }
    }
    $(this).hoverIntent(conf);

    //FILTER FUNCTIONS
    var _filter = '';
    var _count = 0;
    $('a.work-filter').click(function(){
        _filter = $(this).data('filter');

        $('.item.work[data-cats*="'+_filter+'"]').each(function(){
            $(this).show(250,'swing');
        });

        $('.item.work:not([data-cats*="'+_filter+'"])').each(function(){
            $(this).hide(250,'swing');
        });


        $('.item.work[data-cats*="'+_filter+'"]:visible').each(function (i) {
            if ((i+1) % 4 == 0) $(this).css('margin-right', '0');
        });





        $('a.work-filter.active').removeClass('active').data('active','no');
        $(this).addClass('active').data('active','yes');
        $('ul.work-filters').find('a.parent.current').removeClass('current');
        $(this).closest('ul').siblings('a.parent').addClass('current');

    });

    $('.reset a').click(function(){
        $('.item.work').each(function(){
            $(this).show(250,'swing');
        });
        $('a.work-filter.active').removeClass('active').data('active','no');
        $('ul.work-filters').find('a.parent.current').removeClass('current');
    });

});



});
</code></pre>

<p><strong>EDIT:</strong> To clarify, when you first click the filter, it works as it should. It's any subsequent clicking that the margin doesn't get removed in the right spots. So what's missing is some way to clear it all out again and the reapply the margin-right:0 when any filters are clicked after the first.</p>
