Jquery,隐藏和显示第n项后的列表项

Question

假设我有一个无序列表,如下所示:

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
</ul>

我如何使用JQuery隐藏最后2个列表项并在那里有一个"显示更多"链接,所以当点击时,最后2个列表项会出现？

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li style="display:none;">Four</li>
   <li style="display:none;">Five</li>
   <li>Show More</li>
</ul>

Answer 1

请尝试以下代码示例:

$('ul li:gt(3)').hide();
$('.show_button').click(function() {
    $('ul li:gt(3)').show();
});

Answer 2

为了好玩,这里有一个迂回的方式在一个链中做到这一点:

$('ul')
  .find('li:gt(3)')
  .hide()
  .end()
  .append(
    $('<li>Show More...</li>').click( function(){
      $(this).siblings(':hidden').show().end().remove();
    })
);

Answer 3

我只想显示"显示/隐藏",如果大于最大值,所以我这样做,跟随肯:

$('ul').each(function(){
  var max = 6
  if ($(this).find("li").length > max) {
    $(this)
      .find('li:gt('+max+')')
      .hide()
      .end()
      .append(
        $('<li>More...</li>').click( function(){
          $(this).siblings(':hidden').show().end().remove();
        })
    );
  }
});

Answer 4

它会更像这样.您必须隐藏大于2的子项,因为Three被索引为2.此外,如果您想将Show More放在LI标记中,则需要:not(:last-child)在选择器中包含.像这样:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><a href=# class=show>Show More</a></li>
</ul>
<script>$("li:gt(2):not(:last-child)").hide();
$('.show').click(function(){
$("li:gt(2)").show();
});
</script>