js动作后目标最后一个可见的div？答案

【问题标题】：Target last visible div after js action?js动作后目标最后一个可见的div？
【发布时间】：2014-08-18 07:38:04
【问题描述】：

是否可以在 js 函数工作后定位最后一个可见的 div/container，在这种情况下是 mixitup 插件。单击以过滤结果，这会将display: none 或display: inline-block 添加到相应的容器中。

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

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

它只有在页面首次加载时才有效，在您激活 mixitup 并过滤一些结果后，它不会将红色类添加到我假设的最后一个“可见”容器中，因为它已经加载并完成了它的工作..

mix it 功能如下..

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

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

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

所以基本上需要根据display: none 和display:inline-block 在页面上出现和消失的时间来触发它。

【问题讨论】：

你应该可以使用他们的回调函数来更新它。看看这个页面：mixitup.kunkalabs.com/docs/#group-callbacks
你能分享一下你想更新后显示的功能吗？

标签： javascript jquery css filter jquery-selectors

【解决方案1】：

所以我认为，如果您将要再次触发的代码包装在一个函数中，您可以将其设置为在来自 mixItUp 的回调和首次加载时触发。

所以你会有这样的功能：

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

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

然后像这样在第一次加载时调用它：

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

然后编辑你的 mixItUp 声明以在 mixItUp 完成回调时调用此函数：

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

希望对您有所帮助。

【讨论】：

【解决方案2】：

多亏了 shodaburp，我才设法用回调函数解决了这个问题，天知道这一定是侥幸。

我现在拥有的完整代码似乎可以工作......

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


          });

【讨论】：