Geek Answers Handbook

Delete right edge on every fourth VISIBLE element using jQuery?

I have successfully used the jQuery : nth-child () selector to remove the right margin from every fourth element in a long list of DIVs. It looks like this:

$(".myDivClass:nth-child(4n+4)").css("margin-right", 0);

But the page is also open for user interaction (via jQuery), and one of the things the user can do is hide / show elements. When an element is hidden, its style is set to "display: none". Elements move, therefore, if you delete one element in the middle of a line, the element from the line below bounces, for example:

Problem with margin when an element is removed

, , , visible; - :

$(".myDivClass").css("margin-right","20px");
$(".myDivClass:visible:nth-child(4n+4").css("margin-right", 0);

, , , (?)

? ?

!

/

+5
2

, , , , ( ) margin-right, .

, - , , , , .

+5

Hmm, , nth-child(), , . , . , .remove() .detach() . , , .

$('.box:visible:nth-child(5n+5)').addClass('noSide');

$('.close').click(function() {
    // needs to be removed or detached because the nth child
    // appears to ignore hidden elements
    $(this).parent().detach();
    $('.noSide').removeClass('noSide');
    $('.box:visible:nth-child(5n+5)').addClass('noSide');
});
+1

More articles:


All Articles