CODEWITHSUNDEEP
javascriptjquery
ayaz khan
ayaz khan

Reputation: 141

How can show specific 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.

Upvotes: 0

Views: 227

Answers (5)

Pranav C Balan
Pranav C Balan

Reputation: 115212

You can use :lt() and :gt() pseudo selectors

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>

UPDATE: If you want to slide continuously then following code can be used

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>

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

A better 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>

Upvotes: 2

user1636522
user1636522

Reputation:

Here is another possibility:

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>

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You can do like this,

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

Upvotes: 0

Dhara Parmar
Dhara Parmar

Reputation: 8101

You can try this:

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

Upvotes: 0

Related Questions