css - CSS：如果元素为 display:none，则保持对象的浮动和 nth-child 清除

Question

这很难解释，这就是为什么我创建了一个jsfiddle来可视化我的问题。

我有一个元素网格，其中每四个元素都会被清除clear:left。

我有一个切换（在我的真实情况下是一个过滤器），它隐藏了一些浮动元素，我想向上移动其余元素并仍然保持 4by4 网格。

<div class="item"> 1 </div>
<div class="item"> 2 </div>
…

.item:nth-of-type(4n+1) { clear: left; }

请参阅此示例：http: //jsfiddle.net/K4rXM/

当点击“做它！” 链接nth-of-type规则有点被忽视。突然所有元素都向左浮动，并且在第 4 个元素之后没有清晰。

这实际上只是稍微描述了我的问题。实际上，像我这样的响应式布局有点复杂。

对我有什么想法和提示吗？提前谢谢你，马特

Answer 1

$('#test').click(function(e) {
e.preventDefault();
$('.item').hide();
$('.call').show();
$('.item:visible').each(function (i) {
if (i % 4 == 0) $(this).addClass('clearLeft');
});
});


.clearLeft{clear:left;}

在我的评论中，它仍在计算隐藏的 div，您必须检查哪些是可见的，然后应用一个类。 http://jsfiddle.net/calder12/K4rXM/4/