I have successfully used the jQuery :nth-child() selector to remove the right margin from every fourth element in a long list of div's. It looks like this:
我已经成功地使用了jQuery:nth-child()选择器，以从一个长列表的div中删除每个第四个元素的右边缘。它看起来像这样:
$(".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 that the user can do is hide/show elements. When an element is hidden, its style is set to "display:none". The elements are floated so if you remove one element in the middle of a row, an element from the row below will jump up, like this:
但是该页面也为用户交互打开(通过jQuery)，用户可以做的一件事是隐藏/显示元素。当一个元素被隐藏时，它的样式被设置为“display:none”。元素是浮动的，所以如果你在一行中间移除一个元素，下面一行中的一个元素就会跳出来，就像这样:
My first thought was to redo the whole thing by first adding a margin to all elements and then remove it from every fourth visible element; something like this:
我的第一个想法是重做整件事，首先给所有元素添加一个边距，然后从每四个可见元素中删除它;是这样的:
$(".myDivClass").css("margin-right","20px");
$(".myDivClass:visible:nth-child(4n+4").css("margin-right", 0);
But the second row does nothing and I don't think you can stack pseudo selectors like in the example above(?)
但是第二行什么也不做，我认为您不能像上面的示例(?)那样堆叠伪选择器
Is there a solution to this problem? Is there a better way to do this?
这个问题有解决方案吗?有更好的方法吗?
Thanks in advance!
提前谢谢!
/Thomas
/托马斯
2 个解决方案
#1
5
I know this isn't directly an answer to your question, but when I do similar things with floating a bunch of block elements with some spacing between them, I usually will keep the margin on all of them but make their parent container have (in this case) a negative margin-right equal to the spacing between the elements.
我知道这并不是直接回答你的问题,但是当我做类似的事情与浮动一堆块元素之间的间距,我通常会保持他们的利润在所有,但他们的父容器(在本例中)一个负margin-right等于元素之间的间距。
This way the parent will still fit where you want it but the children will just float as they should with the space they need.
这样，父节点仍然适合于您想要的位置，但是子节点将根据需要浮动。
#2
1
Hmm, ok the nth-child() selector seems to not function as it should. It seems to ignore the hidden elements. So you may have to .remove() or .detach() the closed elements. Here is a demo, but it modifies the border instead of the margin to make it more visible for demo purposes.
嗯，n -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
5
I know this isn't directly an answer to your question, but when I do similar things with floating a bunch of block elements with some spacing between them, I usually will keep the margin on all of them but make their parent container have (in this case) a negative margin-right equal to the spacing between the elements.
我知道这并不是直接回答你的问题,但是当我做类似的事情与浮动一堆块元素之间的间距,我通常会保持他们的利润在所有,但他们的父容器(在本例中)一个负margin-right等于元素之间的间距。
This way the parent will still fit where you want it but the children will just float as they should with the space they need.
这样，父节点仍然适合于您想要的位置，但是子节点将根据需要浮动。
#2
1
Hmm, ok the nth-child() selector seems to not function as it should. It seems to ignore the hidden elements. So you may have to .remove() or .detach() the closed elements. Here is a demo, but it modifies the border instead of the margin to make it more visible for demo purposes.
嗯，n -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');
});