jQuery 如果只有一项会淡出它，这是错误的

Question

我有这个代码：

function fadeLi(elem) {
  elem
    .delay()
    .fadeIn()
    .delay(5000)
    .fadeOut(1000, function () {
      if (elem.next().length > 0) {
        fadeLi(elem.next());
      } else {
        fadeLi(elem.siblings(":first"));
      }
    });
}

  jQuery(function () {
    jQuery("#couponList li").hide();
    fadeLi(jQuery("#couponList li:first"));
  });

它应该淡出最后一个项目并淡入下一个项目。我的问题是，如果只有一个项目，那么它就会淡出并且不会再次显示该项目。如果列表中只有一项，那么它应该只显示一项，而不是淡出任何内容。请问我该怎么做？

Answer 1

您可以这样做：

if (elem.siblings().length == 0) {
  elem.show()
} else {...

如果该元素没有任何同级元素，则会显示该元素。

演示

function fadeLi(elem) {
  if (elem.siblings().length == 0) {
    elem.show()
  } else {
    elem
      .delay()
      .fadeIn()
      .delay(5000)
      .fadeOut(1000, function() {
        if (elem.next().length > 0) {
          fadeLi(elem.next());
        } else {
          fadeLi(elem.siblings(":first"));
        }
      });
  }
}

jQuery(function() {
  jQuery("#couponList li").hide();
  fadeLi(jQuery("#couponList li:first"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="couponList">

  <li>test1</li>

</ul>