5

我已成功使用 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);

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

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

提前致谢！

/托马斯

4

2 回答 2

5

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

这样，父母仍然可以适应您想要的位置，但孩子们将按照他们需要的空间漂浮。

于 2011-01-24T20:06:31.623 回答
1

嗯，好的，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');
});
于 2011-01-24T16:15:29.887 回答