Question

jsFiddle（只是一个让你了解问题的例子）

我被困在这个愚蠢的事情上，非常感谢我能得到的任何帮助。我有一个无序的固定宽度列表，里面有多个列表项。这些列表项是动态填充的。

由于页面上的用户操作，其中一些元素可能设置为display:none以隐藏视图。目前，除了使用margin-right选择器的每个第4个元素之外，我将li:not(:nth-child(4n)){}应用于元素。现在的问题是，当通过设置display: none隐藏其中一些元素时，nth-child选择器仍然会考虑隐藏的元素，因为它们仍然在标记中。这会导致样式陷入困境。

增加ul的宽度将不起作用，如小提琴中所示。有没有什么方法可以实现我想要的，而无需从列表中删除这些列表项。

此致

Answer 1

虽然迭代元素可能会更好，但这是一个有趣的方法：

function reMargin(){
    $("li").css("margin-right", 10);
    $("li:visible").filter(":odd:odd").css("margin-right", 0);
}

jQuery(document).ready(function(){
    jQuery('#set-display').on('click', function(){
        jQuery('#set-this').addClass('display-none');
        reMargin();
    });

    reMargin();
});

http://jsfiddle.net/PrgTQ/2/

:odd:odd实际上每4个元素返回一次。

CSS：jQuery：将margin-right应用于li元素，除了每个第4个子元素（仅适用于显示的元素：block）

1 个答案: