Question

This is tricky and tough to explain, that’s why I created a jsfiddle to visualize my problem.

I have a grid of elements where every fourth element is cleared left clear:left.

I have a toggle (in my real case a filter) that is hiding some of those floated elements and I want to move the rest up and still maintain the 4by4 grid.

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

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

See this examample: http://jsfiddle.net/K4rXM/

When clicking the “Do It!” link the nth-of-typerule is kind of neglected. Suddenly all elements float to the left and there is no clear after the 4th element.

This is actually just slightly describing my problem. Actually it is a bit more complicated with a responsive layout like i have it.

Any ideas and tipps for me? Thank you in advance,
Matt

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;}

As in my comment it’s still counting the hidden divs, you have to check which are visible, then apply a class. http://jsfiddle.net/calder12/K4rXM/4/