如何使用jquery显示具体的li数

How can show specific number of li using jquery?

本文关键字：li 何使用 jquery 显示      更新时间：2023-09-26

我想显示3个li，1秒钟后，这3个li将向上滑动，下一个3 li将自动显示在div.#content 中

<div id="content">
    <ul>
        <li>122</li>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>fourth</li>
        <li>fifth</li>
        <li>sixth</li>
    </ul>
</div>

我尝试了使用setTimeout功能的toggle，但它确实满足了我的要求。我知道这个问题对某人来说可能很愚蠢，但我相信我真的需要你的指导，请指导我如何完成这项任务。如果有人指导我，我将不胜感激。我不想使用任何插件。

实现这一点的更好方法（不是语义方法，而是）是包装每3个<li>，然后遍历它们。一种方法是：

$(function () {
  var lis = $("ul > li");
  for(var i = 0; i < lis.length; i+=3) {
    lis.slice(i, i+3).wrapAll("<div class='slide'></div>");
  }
  $(".slide").hide();
  $(".slide:first").slideDown();
  setInterval(function () {
    if ($(".slide:visible").next(".slide").length == 0) {
      $(".slide:visible").slideUp(function () {
        $(".slide:first").slideDown();
      });
    }
    else
      $(".slide:visible").slideUp(function () {
        $(this).next(".slide").slideDown();
      });
  }, 2500);
});
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div id="content">
  <ul>
    <li>122</li>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
  </ul>
</div>

您可以使用:lt()和:gt()伪选择器

var i = 2,
  $ul = $('#content ul'),
  int = setInterval(function() {
      $('li', $ul).slideUp();
      $('li:gt(' + i + '):lt(3)', $ul).slideDown();
      i += 3;
      if (i + 1 >= $('li', $ul).length) clearInterval(int);
    },
    2000)
#content ul li:nth-child(n+4) {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
  <ul>
    <li>122</li>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
  </ul>
</div>

更新：如果你想连续滑动，那么可以使用以下代码

var i = 2,
  $ul = $('#content ul'),
  int = setInterval(function() {
      $('li', $ul).slideUp();
      $('li' + (i == -1 ? '' : ':gt(' + i + ')') + ':lt(3)', $ul).slideDown();
      i += 3;
      if (i + 1 >= $('li', $ul).length) i = -1;
    },
    2000)
#content ul li:nth-child(n+4) {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
  <ul>
    <li>122</li>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
  </ul>
</div>

你可以试试这个：

$("li").hide();  // this will hide all li first
$('ul li:lt(3)').show(); // this will display first 3 li from all li

你可以这样做，

$("#content ul li").hide();
i = 0;
setInterval(function() {
  i = (i + 3) % $("#content ul li").length;
  $("#content > ul >li").slideUp();
  $("#content > ul >li:gt(" + i + ")").slideDown();
  $("#content > ul >li:gt(" + (i + 3) % $("#content ul li").length + ")").hide();
}, 1000);

Fiddle

这里还有另一种可能性：

var steps = 3;
$(function tick() {
  setTimeout(function () {
    var top = '-=' + (steps * 31) + 'px';
    var lis = $('li:lt(' + steps + ')');
    var clones = lis.clone().appendTo('ul');
    $.when(
      $('li').animate({ top: top }, 'slow')
    ).done(function () {
      clones.remove();
      lis.appendTo('ul');
      $('li').css('top', 'auto');
      tick();
    });
  }, 1000);
});
* {
  padding: 0;
  margin: 0;
}
ul {
  overflow: hidden;
  height: 92px;
}
li {
  display: block;
  position: relative;
  line-height: 30px;
  padding: 0 10px;
  background: #DDD;
  margin-bottom: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li><li>H</li></ul>

相关文章：