jQuery，在第n个项目后隐藏和显示列表项

Question

假设我有一个无序列表，如下所示：

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

如何使用jQuery隐藏最后两个列表项，并在那里添加一个“显示更多”的链接，以便单击时最后两个列表项会出现？

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

- Keith Donegan

Answer 1

尝试以下代码示例：

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

- pex

Answer 2

为了好玩，这里有一个绕路但可用于一条链上的方法：

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

- Ken Redler

---

不错。我也在为自己尝试同样的事情。我正在使用手机打字，无法测试，但我喜欢你的方法。 - Brian Scott

你的兄弟姐妹(':hidden')的方法很不错。 - pex

这很酷，但您能否添加一些内容，以便在打开后显示“显示较少”的li吗？ - ManreeRist

Answer 3

我只想在大于最大值时显示“显示/隐藏”，所以我按照 Ken 的方法进行了如下操作：

$('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();
        })
    );
  }
});

- CloudMagick

Answer 4

可能更像这样。您需要隐藏大于2的子元素，因为Three被索引为2。此外，如果您想将“显示更多”放在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>

- bozdoz

---

我被投票否决感到荒谬。我的代码是正确的。被接受的答案中使用了gt(4)，但在这个上下文中并不正确。我认为我的答案更正确、更全面。 - bozdoz

Answer 5

您可以尝试使用Show First N Items jQuery 插件。您只需要编写以下内容即可：

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

它将自动转换为这个：

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li><a href="#" class="show-first-control">Show More</a></li>
    <li style="display: none;">Four</li>
    <li style="display: none;">Five</li>
</ul>

点击“显示更多”后，它会转换为这个样子：

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li style="display: none;"><a href="#" class="show-first-control">Show More</a></li>
    <li style="display: list-item;">Four</li>
    <li style="display: list-item;">Five</li>
</ul>

提供一下信息，我对这个插件做出了贡献。

- Eric Broder

---

为什么下载没有评论？发布者花时间提供了解决方案并附上了免责声明，希望能得到一些反馈。 - crafter

Answer 6

在跟随Ken和Cloud之后，我为“更多”按钮添加了功能，可以将其切换为“较少”并切换相关的列表项。

$('.nav_accordian').each(function(){
    var max = 6
    if ($(this).find('li').length > max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="sub_accordian"><span class="show_more">(see more)</span></li>');
        $('.sub_accordian').click( function(){
            $(this).siblings(':gt('+max+')').toggle();
            if ( $('.show_more').length ) {
                $(this).html('<span class="show_less">(see less)</span>');
            } else {
                $(this).html('<span class="show_more">(see more)</span>');
            };
        });
    };
});

- Robert Waddell

Answer 7

我假设您正在按照示例代码使用UL开始。

我会找到UL并隐藏大于您想要最初显示的最后一项的索引的项目。然后，我会添加一个新项目作为显示其余内容的钩子。最后，我会隐藏“显示更多”选项，因为它不再需要。

请参见以下内容：

$('ul li:gt(3)')
.hide()
.parent()
.append('<li onclick="$(this).parent().find(''li:gt(3)'').show();$(this).hide();">Show more</li>');

- Brian Scott