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

Question

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

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

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

一开始你有5个项目，注意第5个项目是蓝色的，现在如果你选择只显示一个项目，然后点击那个项目将其删除，另一个项目将是蓝色的（第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 个元素。但它是第一个可见的项目，所以它应该是绿色的。

Answer 1

您在元素中添加或删除 visible class。

然后，使用这些选择器代替 :nth-child:

.visible, .one {
    background-color: green;
}
.visible ~ .visible, .two {
    background-color: orange;
}
.visible ~ .visible ~ .visible, .three {
    background-color: red;
}
.visible ~ .visible ~ .visible ~ .visible, .four {
    background-color: pink;
}
.visible ~ .visible ~ .visible ~ .visible ~ .visible, .five {
    background-color: blue;
}

$('div').on('click', function() {
  var num = $(this).text();
  for (var i = 0; i < 5; i++) {
    if (i < num) {
      $('li').eq(i).addClass('visible').fadeIn();
    } else {
      $('li').eq(i).removeClass('visible').fadeOut();
    }
  }
});
$('li').addClass('visible');
$(document).on('click', 'li.visible', function() {
  $(this)
    .removeClass('visible')
    .fadeOut(function() {
      $(this).remove();
    })
    .parent().append('<li class="visible"></li>');
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 2

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

的代码分开

$(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>

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

How can I target only visible objects with nth-child?

css

jquery

css-selectors