ayaz khan ayaz khan - 6 months ago 11
Javascript Question

How can show speficific number of li using jquery?

I want to show 3

li
and after 1 second these 3
li
will be slide up and next 3
li
will be automatically show up in the
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>


I tried
toggle
with
settimeout
function, but it does fulfill on my requirements. I know this question may be stupid for someone but believe i really need your guideline please guide me how can i done this task. I will appreciate if someone guide me. I don't want to use any plugin.

Answer

The best way (not a semantic way, but) to achieve this is to wrap every 3 <li> and then walk through them. One way is:

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

Comments