Target last visible div after js action?

Question

Is it possible to target the last visible div/container after a js function has worked, in this case mixitup plugin. You click to filter your results, this adds display: none or display: inline-block to the appropriate containers.

Using this code from another stack question

$(function () {
    var $items = $($(".partners_list.container article.mix").get().reverse());

    $items.each(function () {
        if ($(this).css("display") != "none") {
            $(this).addClass("red");
            return false;
        }
    });
});

It works but only when the page first loads, after you active the mixitup and filter some results it doesn’t add the class red to the last ‘visible’ container i assume because its already loaded and done its job..

The mix it function is as follows..

$(function(){
    var $filterSelect = $('#FilterSelect'),
    $container = $('#partner_container');

    $container.mixItUp({
        animation: {
            enable: false       
        }
    });

    $filterSelect.on('change', function(){
        $container.mixItUp('filter', this.value);
    });           
});

So essentially need it to fire based on when the display: none and display:inline-block appears and disappears on the page.

You should be able to update it using their callback function. Check out this page: https://mixitup.kunkalabs.com/docs/#group-callbacks — kyooriouskoala, Jun 27 '14 at 08:54
Can you share the function which you want to update the display after. — AndrewPolland, Jun 27 '14 at 08:56

score 0 · Answer 1 · answered Jun 27 '14 at 09:14

So I think if you wrap the code you want to fire again in a function you can then set it to fire on callback from the mixItUp and on first load.

So you'd have a function like this:

function updateDisplay() {
    var $items = $($(".partners_list.container article.mix").get().reverse());

    $items.each(function () {
        if ($(this).css("display") != "none") {
            $(this).addClass("red");
            return false;
        }
    });
}

And then call it on first load like this:

$(function () {
    updateDisplay();
});

And then edit your mixItUp declaration to call this function also on callback of mixItUp having finished:

$container.mixItUp({
    animation: {
        enable: false       
    },
    callbacks: {
        onMixEnd: function(){
            alert('No items were found matching the selected filters.');
        }
    }
});

Hope that helps.

score -1 · Answer 2 · answered Jun 27 '14 at 09:08

Thanks to shodaburp i’ve managed to figure it out with the callback function, god knows how must be a fluke.

The full code i have now and seems to work...

 $(function(){

            var $filterSelect = $('#FilterSelect'),
                $container = $('#partner_container');

            $container.mixItUp({
                animation: {
                    enable: false       
                },

                callbacks: {
                        onMixEnd: function(state){


                            var $items = $($(".partners_list.container article.mix").get().reverse());

                                $items.each(function () {
                                    if ($(this).css("display") != "none") {
                                        $(this).addClass("red");
                                        return false;
                                    }
                                });

                        }
                    }

             });


            $filterSelect.on('change', function(){
              $container.mixItUp('filter', this.value);
            });


          });

Target last visible div after js action?

2 Answers2