Changing CSS when changing select

Question

This is currently working. But what I'm wondering is why this isn't affecting the CSS of every .container within a .filteritem. It's only finding the very first one on the page whereas I want to to change everything .container within a .filteritem.

$(document).ready(function () {
    $('#select').on('change', function () {
        if (this.value == 'alltopics') {
            $('.filteritem').fadeIn(500);
        } else {
            var elems = $('.filteritem[data-aa_eventtopic="' + this.value + '"]');
            $('.filteritem').not(elems).closest('.filteritem').fadeOut(500);
            elems.closest('.filteritem').fadeIn(500);

            //HERE
            $('.filteritem').each(function () {
                setTimeout(function () {
                    $('.container').filter(':visible').first().css({
                        borderTop: 'none',
                        paddingTop: '0px'});
                }, 501);
            });
        }
    });
});

Answer 1

I guess you just have to get rid of that .first() call

Answer 2

Notice the .first() there...

$('.filteritem').each(function() {
  setTimeout( function(){$('.container').filter(':visible').first().css({borderTop : 'none', paddingTop : '0px'});},501);        
});

You're telling it to target only the first .container, and more so, not even a container within the current .filteritem. Perhaps you meant to do this:

$('.filteritem').each(function() {
   setTimeout( function(){$(this).find('.container').filter(':visible').css({borderTop : 'none', paddingTop : '0px'});},501);        
});

** UPDATE **

and because you only want the first CHILD of the container:

$('.filteritem').each(function() {
   setTimeout( function(){$(this).find('.container').filter(':visible').children(':first').css({borderTop : 'none', paddingTop : '0px'});},501);        
});