jquery отфильтрованные элементы перемещены между div

0

Я собираю небольшую функцию фильтрации для элементов, перечисленных в элементах div. Эти элементы div находятся в слайдере, расположенном рядом друг с другом. Поэтому каждый столбец содержит несколько элементов. Фильтрация работает, но я не могу найти способ группировать отфильтрованные элементы один под другим, чтобы они были в первом столбце, а не в их oryginal столбце:

<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/yQD7X/

У кого-нибудь была схожая проблема?

  • 0
    Я думаю, что это больше вопрос CSS. Я не уверен на 100%, почему вам нужны разные столбцы в HTML. Все, что нужно для стиля, должно идти в CSS, а HTML должен быть только для данных контента. Значение ... если вы не всегда хотите иметь несколько столбцов ... не кодируйте несколько столбцов в HTML.
  • 0
    добавить обработчик события keyup в другой обработчик события keyup не очень хорошая идея?
Показать ещё 2 комментария
Теги:

1 ответ

0
Лучший ответ

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

Этот метод удаляет все видимые элементы и отправляет их после проверки наличия свободного места в текущем столбце, если он не принимает следующий.

  • 0
    Эй, Смоки, это именно то, что я искал - большое спасибо за помощь!
  • 0
    np;) пожалуйста, подтвердите мой ответ, если это помогло :)
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню