Question

我正在为div元素中列出的项目建立小的过滤功能。这些div元素位于彼此相邻的滑块中。因此每列包含许多项目。过滤工作正在进行，但我找不到一种方法将过滤后的项目分组到另一个下方，因此它们将位于第一列中，而不是在其原始列中：

<input id="filter" name="filter" size="40"/>

<div class="filtered">        
    <div class="archive-col-1 column">
        <div class="name"><div class="element">Alchemy</div></div>
        <div class="name"><div class="element">Balboa</div></div>
        <div class="name"><div class="element">Nebula</div></div>
        <div class="name"><div class="element">Radio</div></div>
    </div>
    <div class="archive-col-2 column">
        <div class="name"><div class="element">Mathematics</div></div> 
        <div class="name"><div class="element">Disco</div></div>
        <div class="name"><div class="element">Antwon</div></div>   
        <div class="name"><div class="element">Barracuda</div></div>            
    </div>
    <div class="archive-col-3 column">
        <div class="name"><div class="element">English</div></div>
        <div class="name"><div class="element">France</div></div>
        <div class="name"><div class="element">Nairobi</div></div>  
        <div class="name"><div class="element">Crazy</div></div>    
    </div>    
</div>

function filter(element) {

    $("#filter").keyup(function () {
        var filter = $(this).val(); 
        count = 0;

        $(".column .element").each(function () {
            var parent = $(this).parent();
            var length = $(this).text().length > 0;
            if (length && $(this).text().search(new RegExp(filter, "i")) < 0) {
                parent.hide();
            } else {
                parent.show();
                //appendTo.closest('.colums');
                count++;
            }
        });
    });
}

$('input').on('keyup change', function () {
    filter(this);
});

示例：http://jsfiddle.net/pw7k2/

在我的另一个示例中，过滤工作正常，但我不知道如何限制行并将其他过滤的项目移动到下一列，现在它们只转到第一列：

http://jsfiddle.net/yQD7X/

有没有人有类似的问题？

Answer 1

http://jsfiddle.net/pw7k2/2/

function dispatchElements() {
    var $elements = $('.column .element:visible').remove();
    var $column = $('.column:first');

    $elements.each(function(index, value) {
        var height = $column.height();
        var $childrens = $column.children(':visible');
        var childrenHeight = 0;

        $childrens.each(function(){
            childrenHeight += $(this).outerHeight();
        });

        childrenHeight += childrenHeight/$childrens.length;

        if (childrenHeight > height) {
            $column = $column.next();
        }

        $(this).appendTo($column);
    });
}

此方法删除所有可见元素，并在检查当前列中是否有可用空间后调度它们，如果没有则需要下一个。

jquery过滤后的元素在div之间移动

1 个答案: