Jquery，在第 n 项之后隐藏和显示列表项答案

【问题标题】：Jquery, hide & show list items after nth itemJquery，在第 n 项之后隐藏和显示列表项
【发布时间】：2011-05-02 12:54:44
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery hide toggle

【解决方案1】：

试试下面的代码示例：

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

【讨论】：

【解决方案2】：

我假设您按照示例代码从 UL 开始。

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

请参阅以下内容：

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

【讨论】：

【解决方案3】：

为了好玩，这里有一种环环相扣的方式：

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

【讨论】：

不错。我也在为自己尝试同样的方法。我在手机上打字，虽然无法测试，但也喜欢你的方法。
你的兄弟姐妹(':hidden') 方法很不错
这很酷，但你可以添加它，以便它在打开后显示一个'show less' li。

【解决方案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>

【讨论】：

可笑的是我被否决了。我的代码是正确的。接受的答案有 gt(4)，这在上下文中是不正确的。我觉得我的回答更正确、更彻底。

【解决方案5】：

我只想在大于最大值时显示“显示/隐藏”，所以我按照 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();
        })
    );
  }
});

【讨论】：

【解决方案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>');
            };
        });
    };
});

【讨论】：

【解决方案7】：

你可以试试Show First N Items jQuery Plugin。你只需要写这个：

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

仅供参考，我为这个插件贡献了代码。

【讨论】：

为什么下载没有评论，发帖人花时间提供了一个带有示例的解决方案，并在项目中发布了免责声明。