如何在已过滤的列表中使用nth-child？

Question

我从数据库中提取图像/项目列表，并根据类别对其进行过滤。

设计要求是平铺/马赛克布局，在第7个项目上有一个大方块，在第8个项目上有一个更大的矩形，在所有过滤器上。意味着较大的方块不能有不同的顺序。

目前我的方法是使用n-child选择器从项目列表中选择第7和第8个：

/* create big item block */
.grid-item:nth-child(7n) { 
  height: 24em;
  width: 50%; 
}
/* create rectangle item block */
.grid-item:nth-child(8n) { width: 50%; }

这是一个问题，因为它只会影响整个列表。在选择按钮/类别后，如何定位已过滤列表中的第7和第8项？

这是一个具有正确布局的codepen我试图为view-all过滤器实现。我试图实现相同的布局，但基于过滤器的不同项目。如果您选择“谢谢”类别，您可以看到大方块被拉到此列表的第3位，并且由于第n个子选择器仍然是大方块。

http://codepen.io/H0BB5/pen/BLNLWy

Answer 1

问题是双重的：

• 同位素不会删除已滤除的项目，而是使用display:none隐藏它们。因此，CSS中的nth-child()选择器仍可选择项目。
• 在网格重新排列之前需要执行项目的大小调整，因此在调用grid.isotope({filter: ...})之前。

因此，CSS不会自己完成这项工作。需要更多的javascript。

一种方法是：

• 设置＆＃39; arrangeComplete＆＃39;事件处理程序，用于调整网格项的大小，并调用grid.isotope()重新排列它们，
• 调用grid.isotope({ filter: ... })并允许在应用过滤器后触发事件处理程序。

这会有一些工作，但用户会看到双重重新排列。

// bind filter button click
$('#filters').on('click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    grid.one('arrangeComplete', function(event, laidOutItems) {
        // Triggered after a layout and all positioning transitions have completed.
        $('.grid .grid-item').filter(':visible').removeClass('big rectangle')
            .eq(6).addClass('big') // the 7th item
            .end()
            .eq(7).addClass('rectangle'); // the 8th item
        grid.isotope(); // re-trigger isotope
    });
    grid.isotope({ filter: filterFns[filterValue] || filterValue });
}).find('button').eq(0).trigger('click');// trigger click on default button to initialize everything.

为了获得更好的视觉效果，您可以变得聪明：

• ＆＃34;预应用＆＃34;通过过滤包含网格中所有项目的jQuery集合，手动过滤，而不应用同位素过滤器，
• 仍然在jQuery集合中，选择第7/8项（来自那些将可见的项目）并调整它们的大小，
• 最后，再次使用相同的过滤器，调用grid.isotope({filter: ...})实际重新排列网格。

因此，网格重新排列一次，视觉效果更令人愉悦。

幸运的是，jQuery链接使代码变得相当简单：

// bind filter button click
$('#filters').on('click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    grid.find('.grid-item')
        .removeClass('big rectangle')
        .filter(filterFns[filterValue] || filterValue)
        .eq(6).addClass('big') // the 7th item
        .end()
        .eq(7).addClass('rectangle') // the 8th item
    grid.isotope({ filter: filterFns[filterValue] || filterValue });
}).find('button').eq(0).trigger('click');// trigger click on default button to initialize everything.

<强> demo

在这两种方法中，替换两个＆＃39; .grid-item：nth-​​child＆＃39;样式表中的指令：

.grid-item.big { 
  height: 24em;
  width: 50%; 
}
.grid-item.rectangle { width: 50%; }

注意：要仅设置第7 /第8项的样式，而不是15日/ 16日，23日/ 24日等，不要使用nth-child 。