使用jQuery删除每四个VISIBLE元素的右边距？

Question

我已成功使用jQuery :nth-child()选择器从div的长列表中的每第四个元素中删除右边距。它看起来像这样：

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

但该页面也是开放的用户交互（通过jQuery），用户可以做的一件事就是隐藏/显示元素。隐藏元素时，其样式设置为“display：none”。元素是浮动的，所以如果你删除一行中间的一个元素，下面一行中的元素会跳起来，如下所示：

我的第一个想法是重做整个事情，先为所有元素添加一个边距，然后从每四个可见元素中删除它;像这样的东西：

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

但第二行什么都不做，我认为你不能像上面的例子那样堆叠伪选择器（？）

这个问题有解决方案吗？有更好的方法吗？

提前致谢！

/托马斯

Answer 1

我知道这不是你问题的直接答案，但是当我做了类似的事情，浮动一堆块元素，它们之间有一些间距时，我通常会保留所有这些元素的边距但是制作它们的父容器（在这种情况下）有一个负边距 - 右边等于元素之间的间距。

这样父母仍然可以适合你想要的地方，但是孩子们只需要他们需要的空间就可以漂浮。

Answer 2

嗯，好吧，nth-child()选择器似乎无法正常运行。它似乎忽略了隐藏的元素。因此，您可能需要.remove()或.detach()封闭元素。这是一个demo，但它会修改边框而不是边距，以使其更适合演示目的。

$('.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');
});