如何仅将带有nth-child的可见对象作为目标？
How can I target only visible objects with nth-child?

我有5个项目，在它们上方有一个按钮，用于通知将显示多少个项目。 对于每个项目，我都有不同的背景图片。

问题是，当某人点击某个项目时，该项目将被删除，而另一个项目将使用jQuery appended ；当新项目被附加时，它将到达该行的末尾，使其成为第5个元素，然后使其成为第5个元素具有第5个项目的背景，但是有时第5个项目是唯一可见的，并且应该与第1个项目的背景保持一致。

这是一个JSFiddle： https ://jsfiddle.net/wmerussi/csqge7jr/

开始时有5个项目，请注意第5个项目是蓝色，现在如果您选择仅显示1个项目，然后单击该项目以将其删除，则另一个项目将是蓝色（第5个项目的颜色）。

是否可以仅将可见项目作为目标？ 还是可以将可见的<li>重新排列到列表的开头？

HTML：

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

jQuery的：

$('div').on('click', function() {
    var num = $(this).text();
    for(var i=0; i<5 ;i++) {
        if(i < num) {
            $('li').eq(i).fadeIn();
        } else {
            $('li').eq(i).fadeOut();
        }
    }
});

$(document).on('click', 'li', function() {
    $(this).fadeOut(function() {$(this).remove();});
    $(this).parent().append('<li></li>');
});

CSS：

div {
    display: inline-block;
    margin-right: 10px;
    width: 30px;
    height: 30px;
}

li:nth-child(1), .one {
    background-color: green;
}


li:nth-child(2), .two{
    background-color: orange;
}

li:nth-child(3), .three{
    background-color: red;
}

li:nth-child(4), .four{
    background-color: pink;
}

li:nth-child(5), .five{
    background-color: blue;
}

更新
如何重现问题
单击我的JSFiddle，然后选择仅显示1个项目（顶部的绿色“ 1”框）。 之后，如果您单击该可见项以将其删除（使用jQuery），您将看到附加项将变为蓝色，因为它们被附加至ul列表的末尾，从而成为第5个元素。 但这是第一个可见的项目，因此它应该是绿色的。