jquery - 我怎样才能只用第 n 个子对象定位可见对象？

Question

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

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

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

一开始你有 5 个元素，注意第 5 个元素是蓝色的，现在如果你选择只显示一个元素，然后单击那个元素将其删除，另一个元素将是蓝色的(第 5 个元素的颜色) .

是否可以只定位可见的元素？或者是否可以重新排列可见的 <li> s 到列表的开头？

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 个元素。但它是第一个可见的元素，所以它应该是绿色的。

Answer 1

我的解决方案是创建一个函数来管理根据元素的位置和可见性向元素添加删除类，并在每个以某种方式更新元素的事件之后调用该函数。
这样您就可以将元素类管理与更新元素的代码分开

$(function() {

  //the class management function
  function updateElemClasses() {
    //all color based classes the lists can have
    var classes = ['one', 'two', 'three', 'four', 'five'];

    //wait for fadeout to happen. Fadeout could take longer but this is just a proof of concept
    window.setTimeout(function() {
      $('li:visible').each(function(idx) {
        $(this).removeClass(classes.join(' ')).addClass(classes[idx]);
      })
    }, 500);

  }

  $('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();
      }
    }
    updateElemClasses()
  });

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

    updateElemClasses()
  });

  updateElemClasses();
});

/* you do not need nth-child now */

div {
  display: inline-block;
  margin-right: 10px;
  width: 30px;
  height: 30px;
}
.one {
  background-color: green;
}
.two {
  background-color: orange;
}
.three {
  background-color: red;
}
.four {
  background-color: pink;
}
.five {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<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>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>