Обработка строк + перевалы (HTML) со скрытыми элементами в JS

Question

Что касается до моего последнего вопроса: automatically add row after n Elements (Jquery)

Он работает как ожидалось, но у меня есть одна последняя вещь, которая должна быть фиксированной или управляться в перекрашивать -процедура.

Открытие сайта приведет отображение всех элементов, так что-то вроде:

<div class="w-col w-col-4 entry allfirewalls trobi Test"> 
<div class="w-col w-col-4 entry allfirewalls trobi"> 
<div class="w-col w-col-4 entry Komplett was neues"> 
<div class="w-col w-col-4 entry trobi neu"> 

Вы, ребята помогли мне там, чтобы выяснить, как обернуть 3 дивы в 1 ряд, что я понял, как это:

function handleRows() { 
    var divs = $(".galrows.w-row > .w-col"). 
    for (var i = 0; i < divs.length; i += 3) { 
      divs.slice(i, i + 3).wrapAll("<div class='w-row'></div>"); 
     } 
} 

точка я havn't упоминалось ранее: После нажатия на фильтре (который является pure JS, а не ajax) некоторые элементы скрыты

<div class="w-row"> 
    <div class="w-col w-col-4 entry abc def"> 
    <div class="w-col w-col-4 entry abc 123"> 
    <div class="w-col w-col-4 entry 1234" style="display: none;"> 
</div> 
<div class="w-row"> 
    <div class="w-col w-col-4 entry new_filter"> 
     <a href="/referenzseiten/mein-beispiel/"> 
    <div> 
</diV 

Вы, возможно, понял, что проблема заключается в: Деталь, с elementstyle «дисплей: нет» не должно быть в этом ряду, синк это выглядит немного как это сейчас:

| x | x | | 
| x | | | 

(где х = изображение, показанное)

Звоню функцию handleRows() в document.ready части и после применения фильтра:

$(document).ready(function() { 
    handleRows(); 
}); 

// later in the code 
$('.entry').each(function() { 
     if (!$(this).hasClass(filtername)) { 
      $(this).fadeOut(); 
     } else { 
      handleRows(); 
      $(this).fadeIn(); 
     } 
}); 

Надеюсь, у вас есть идея. Заранее спасибо

Answer 1

Вы должны использовать селектор JQuery псевдо :visible отфильтровывать из совпавших набора скрытых DIVs:

var divs = $(".galrows.w-row > .w-col:visible") 

Но надо знать fadeOut() и fadeIn() методу работ (ака) асинхронно, может дать вам неожиданное поведение (может быть, используйте соответствующие обратные вызовы). Трудно сказать, не проверяя соответствующий образец онлайн.