Question

是否可以在js函数运行后定位最后一个可见的div /容器，在本例中为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并过滤一些结果之后，它不会将类红色添加到我假设的最后一个'可见'容器中，因为它已经加载并完成了它的工作.. < / p>

它的功能如下..

$(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何时出现并在页面上消失来触发它。

Answer 1

感谢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);
            });


          });

Answer 2

所以我认为如果你想在函数中再次触发代码，你可以将它设置为在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.');
        }
    }
});

希望有所帮助。

在js动作后定位最后一个可见的div？

2 个答案: