使用jQuery在每四个可见元素上删除右边距？

我已经成功地使用jQuery选择器从一长串div中的每四个元素中删除了右边距。看起来是这样的：

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

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

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

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

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

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

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

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

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

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

提前谢谢

---

/托马斯

嗯，好的，

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

---

我知道这不是对你问题的直接回答，但是当我用浮动一堆块元素来做类似的事情时，它们之间有一定的间距，我通常会在所有的块元素上保留边距，但使它们的父容器（在本例中）的负边距正好等于元素之间的间距

---

这样，父对象仍将适合您所需的位置，但子对象将按其所需的空间进行浮动。

是否可以尝试使用您添加和删除的类，以使其更易于定位？是的，您应该能够堆叠伪选择器。它实际上按照预期工作。正如这个答案所指出的——文档中指出：“使用：nth-child（n），所有的子元素都会被计数，不管它们是什么[…]”。是的，我认为：nth-child（）选择器工作正常，正如polarblau指出的，在我的例子中，问题在于它统计隐藏的元素，而不是忽略它们。无论如何，我不认为我可以使用remove（）或detach（），因为如果用户选择再次显示元素，我需要能够在相同的位置再次显示它们。这对我来说很好，因为我正在寻找的解决方案仅用于布局目的。我试试这个！我尝试了这个方法，布局工作正常，但我仍然在浏览器窗口中看到一个水平滚动条，指示容器比它应该的宽？可能将容器放在另一个包装器分区中。这可能是溢出：隐藏；？如果没有任何代码进行测试，很难确定。