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

你们帮我在那里找出如何将1个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

您可能已经弄清楚问题是什么：项目，元素样式＆＃34;显示：无＆＃34;不应该在这一行，现在看起来有点像这样：

| x | 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从匹配的隐藏DIV中过滤出来：

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

但请注意fadeOut()和fadeIn()方法异步工作（也称为），可能会给您带来意想不到的行为（可能会使用相应的回调）。很难说没有在线检查相关样本。

在JS中处理带有隐藏元素的行+ cols（html）

1 个答案: