Я собираю небольшую функцию фильтрации для элементов, перечисленных в элементах 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);
});
В моем другом примере фильтрация работает нормально, но я не знаю, как ограничить строки и переместить другие фильтрованные элементы в следующий столбец, теперь они идут только в первый столбец:
У кого-нибудь была схожая проблема?
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);
});
}
Этот метод удаляет все видимые элементы и отправляет их после проверки наличия свободного места в текущем столбце, если он не принимает следующий.