Question

我正在创建一个应用程序并使用isotope过滤器库。

我有多个带标题的部分，每个标题下都有一个同位素容器，如下所示：

<div class="main-items-container-a">
    <h2>Items Category 1</h2>
    <div class="items-container">
        <div class="items a">A</div>        
        <div class="items a">A</div>
        <div class="items b">B</div>
        <div class="items c">C</div>
        <div class="items c">C</div>
    </div>
</div>

<div class="main-items-container-b">
    <h2>Items Category 2</h2>
    <div class="items-container">
        <div class="items">A</div>        
        <div class="items">A</div>
        <div class="items">B</div>
        <div class="items">C</div>
        <div class="items">C</div>
    </div>
</div>

我也在为上述项目创建过滤器，我希望当所有项目都被过滤并且该部分中没有更多项目可用时，包含标题h2的整个部分将被隐藏。反之亦然，然后需要显示。

我确实尝试使用Isotope提供的以下事件来实现某些功能，但是我无法找到已过滤项目的长度为0的父项。

$grid.on( 'arrangeComplete', function( event, filteredItems ) {
  console.log( filteredItems.length );
});

我创建了一个JSFiddle来证明这一点。

有人可以指导我做出错误的事情。

没有儿童可用时完全隐藏部分| Isotope.js过滤

0 个答案: