JQuery过滤使用引导列

JQuery Filtering Using Bootstrap Columns

本文关键字：过滤 JQuery      更新时间：2023-09-26

所以我有这个工作小提琴:https://jsfiddle.net/p5ahob32/1/

    $('#filter').keyup(function () {
        var filter = $(this).val(), count = 0;
        $('.col-md-3 a').each(function () {
            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
                // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });
        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Clients = " + count);
    });

如果你在搜索框中输入3，它会淡出所有其他按钮，除了3，但是你会注意到3按钮一直在右边，因为它在bootstrap列中。

我的问题是我如何使它，使所有的搜索项目将出现堆叠在一起很好在左上角?

谢谢!

删除<a>的所有行，除了包含所有cols的外部行和隐藏父行

$(this).parent().fadeOut();
//AND
$(this).parent().show()
演示

// change
$(this).fadeOut();
// to
$(this).parent().css("display","none");
// or 
$(this).parent().fadeOut()
相关文章：