Handling rows + cols (html) with hidden elements in JS

Question

Regarding to my last question: automatically add row after n Elements (Jquery)

It is working like expected, but I have one last thing which has to be fixed or to be managed in the repaint-procedure.

Opening the site will result in displaying all elements, so something like:

<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">

You guys helped me there to figure out how to wrap 3 divs in 1 row, which i realized like this:

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

The point I havn't mentioned before: After clicking on a filter (which is pure JS and not ajax) some of the elements are hidden

<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

You may have figured out what the problem is: The Item, with the elementstyle "display: none" shouldn't be in this row, sinc it looks a bit like this now:

| x | x |   |
| x |   |   |

(where x = image shown)

I call my function handleRows() in the document.ready part and after applying a filter:

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

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

Hope you have an idea. Thanks in advance

`var divs = $(".galrows.w-row > .w-col:visible")`??? To exclude hidden ones from matched set — A. Wolff, Jan 22 '15 at 12:58
I tried that of course, but that didn't work for me, still the same output. — DasSaffe, Jan 22 '15 at 12:59
You should provide online sample as jsFiddle to replicate your issue with all relevant code. `fade` animation methods works asynchronously (kind of), maybe issue comes from here — A. Wolff, Jan 22 '15 at 13:05
Okay, you're right. I wrapped another div around it to access it, added the :visible selector and now it works fine, just as u mentioned. Feel free to post it as answer :) Thank you — DasSaffe, Jan 22 '15 at 13:09

score 1 · Accepted Answer · answered Jan 22 '15 at 13:12

You should use jQuery pseudo selector :visible to filter out from matched set hidden DIVs:

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

But be aware fadeOut() and fadeIn() methods works (aka) asynchronously, could give you unexpected behaviour (maybe use respective callbacks). Hard to say without checking a relevant sample online.

Handling rows + cols (html) with hidden elements in JS

1 Answers1