处理带有 JS 中隐藏元素的行 + 列 (html）

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

本文关键字：html 元素 JS 隐藏 处理      更新时间：2023-09-26

关于我的最后一个问题：在n个元素后自动添加行（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>");
        }
}

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

您可能已经弄清楚问题所在：元素样式为"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();
        }
});

希望你有一个想法。提前致谢

你应该使用 jQuery 伪选择器 ：visible 从匹配的集合隐藏 DIV 中过滤掉：

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

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

相关文章：