CSS：jQuery：对第四个孩子以外的li元素应用margin-right（仅适用于display：block的元素）

Question

jsFiddle （仅是一个示例，可以让您了解问题）

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

由于用户在页面上的操作，可能将其中某些元素设置为display:none以隐藏。 目前，我正在使用li:not(:nth-child(4n)){}选择器将除第4个元素以外的所有元素应用margin-right 。 现在的问题是，当通过设置display: none隐藏这些元素中的某些元素时， 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个元素。