javascript - 处理 rows + cols (html) with hidden elements in 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 个 div 包裹在 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>");
        }
}

我之前没有提到的一点:点击过滤器(纯 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

您可能已经知道问题出在哪里了:元素样式为“display: none”的元素不应在此行中，因为它现在看起来有点像这样:

| x | x |   |
| x |   |   |

(其中 x = 显示的图像)

我在 document.ready 部分调用我的函数 handleRows() 并在应用过滤器之后:

$(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从匹配的隐藏 DIV 集中过滤掉:

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

但请注意 fadeOut() 和 fadeIn() 方法(又名)异步工作，可能会给您带来意想不到的行为(可能使用各自的回调)。如果不在线查看相关示例，很难说。