jQuery if there is just one item fades it out, which is wrong-CodePudding

I have this code:

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"));
  });

and it is supposed to fade out the last item and fade in next item. My problem is if there is just one item then it fades it out and it does not display the item again. If there is only one item in the list then it should just display the one item and not fade anything out. How can I do that please?

CodePudding user response：

You can do it like this:

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

This will show the element if it does not have any siblings.

Demo

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>