Javascript 如何隐藏列表中的元素并添加'；显示更多'；特征？

我正在使用javascript构建一个结果列表。我有一个for循环，它迭代一些数据并创建一个mydata div，并将其添加到results div中。让我们假设它看起来像这样：

<div id="results">
    <div class="mydata">data 1</div>
    <div class="mydata">data 2</div>
    ...
    <div class="mydata">data 20</div>
</div>

数据1
数据2
...
数据20

我想做的是一次只显示5个结果，如果用户希望看到更多结果，他们可以单击显示下一个5个或显示更多按钮（或类似按钮）。有什么想法吗

---

只是澄清一下，每次用户单击“显示更多”时，我都想“取消隐藏”接下来的5个元素，而不是所有剩余的元素。因此，每次单击都会显示更多元素，直到所有元素都显示出来。

您可以创建一个CSS类，如：

.hiddenData { display: none }

并将其附加到任何数量超过5的div上

之后，生成用于从所需的div数量中添加/删除此类的处理程序

用于删除类的jQuery：

$(".hiddenData").removeClass("hiddenData")

---

使用以下内容创建一个类：

.hidden_class{
  display: none;
}

将该类添加到所有不希望看到的mydata div中。 当用户单击该按钮时，将其从下一个5 div中删除

每次用户单击“阅读更多”按钮时重复此操作。您可以在此处使用

gt（）

和

lt（）

选择器以及

：visible

下面将显示单击后的5个结果，并在所有项目都可见后删除链接

$('.mydata:gt(4)').hide().last().after(
    $('<a />').attr('href','#').text('Show more').click(function(){
        var a = this;
        $('.mydata:not(:visible):lt(5)').fadeIn(function(){
         if ($('.mydata:not(:visible)').length == 0) $(a).remove();   
        }); return false;
    })
);

$（'.mydata:gt（4）'）.hide（）.last（）.after(
$（'

不管其他人在这里建议什么，我不会用CSS隐藏元素，而是用JS来隐藏，因为如果用户禁用了JS，而你用CSS隐藏元素，他就看不到这些元素。但是，如果他禁用了JS，它们就永远不会被隐藏，也不会出现那个按钮，等等，所以它完全没有脚本原地回退+搜索引擎不喜欢隐藏的内容（但如果在DOM加载时执行，他们将不知道其隐藏）。
这应该可以工作……让我知道它是如何运行的

<script type="text/javascript">
  function ShowHide(id) { $("#" + id).toggle(); }
</script>
<div id="results">
    <div class="mydata">data 1</div>
    <div class="mydata">data 2</div>
    <div class="mydata">data 3</div>
    <div class="mydata">data 4</div>
    <div class="mydata">data 5</div>

    <div style="clear:both" onclick="ShowHide('grp6')">More</div>
    <div id="grp6" style="display:none">
      <div class="mydata">data 6</div>
      <div class="mydata">data 7</div>
      <div class="mydata">data 8</div>
      <div class="mydata">data 9</div>
      <div class="mydata">data 10</div>
    </div>
    <div style="clear:both" onclick="ShowHide('grp11')">More</div>
    <div id="grp11" style="display:none">
      <div class="mydata">data 11</div>
      <div class="mydata">data 12</div>
      <div class="mydata">data 13</div>
      <div class="mydata">data 14</div>
      <div class="mydata">data 15</div>
    </div>
</div>


函数ShowHide（id）{$（“#”+id）.toggle（）；}
数据1
数据2
数据3
数据4
数据5
更多
数据6
数据7
数据8
数据9
数据10
更多
数据11
数据12
数据13
数据14
数据15

在forloop中，还必须添加这些divs隐藏容器

<div style="clear:both" onclick="ShowHide('grp6')">More</div>
    <div id="grp6" style="display:none">

更多

你明白了。
这里有：

   <style>
      /*This hides all items initially*/
      .mydata{
         display: none;
      }
   </style>


/*这会在最初隐藏所有项目*/
.mydata{
显示：无；
}

现在是剧本

   <script>
      var currentPage = 1; //Global var that stores the current page
      var itemsPerPage = 5;
      //This function shows a specific 'page'
      function showPage(page){
          $("#results .mydata").each(function(i, elem){
              if(i >= (page-1)*itemsPerPage && i < page*itemsPerPage) //If item is in page, show it
                $(this).show();
              else
                $(this).hide();
          });
          $("#currentPage").text(currentPage);
      }
      $(document).ready(function(){
          showPage(currentPage);
          $("#next").click(function(){
             showPage(++currentPage);
          });
          $("#prev").click(function(){
             showPage(--currentPage);
          });
      });
   </script>


var currentPage=1；//存储当前页面的全局变量
var itemsPerPage=5；
//此函数显示特定的“页面”
功能显示页（第页）{
$（“#results.mydata”）。每个（函数（i，elem）{
如果（i>=（第1页）*itemsPerPage&&i

和一个示例html：

   <div id="results">
      <div class="mydata">data 1</div>
      <div class="mydata">data 2</div>
      <div class="mydata">data 3</div>
      <div class="mydata">data 4</div>
      <div class="mydata">data 5</div>
      <div class="mydata">data 6</div>
      <div class="mydata">data 7</div>
      <div class="mydata">data 8</div>
      <div class="mydata">data 9</div>
      <div class="mydata">data 10</div>
      <div class="mydata">data 11</div>
      <div class="mydata">data 12</div>
   </div>   
   <a href="javascript:void(0)" id="prev">Previous</a>
   <span id="currentPage"></span>
   <a href="javascript:void(0)" id="next">Next</a>


数据1
数据2
数据3
数据4
数据5
数据6
数据7
数据8
数据9
数据10
数据11
数据12

剩下的唯一一件事就是验证fot不会出现在低于1且高于总页数的页面上。但这很容易

编辑：在这里您可以运行它：

希望这有帮助。干杯。
我的解决方案在这里：

您可以将此链接放在以下位置：

<a href="#" title="" id="results-show-more">show more</a>



并使用以下代码：

var limit = 5;
var per_page = 5;
jQuery('#results > div.mydata:gt('+(limit-1)+')').hide();
if (jQuery('#results > div.mydata').length <= limit) {
    jQuery('#results-show-more').hide();
};

jQuery('#results-show-more').bind('click', function(event){
    event.preventDefault();
    limit += per_page;
    jQuery('#results > div.mydata:lt('+(limit)+')').show();
    if (jQuery('#results > div.mydata').length <= limit) {
        jQuery(this).hide();
    }
});

var限值=5；
每页var=5；
jQuery（'#results>div.mydata:gt（'+（limit-1）+'））.hide（）；
if（jQuery（“#results>div.mydata”）.length如果你使用jQuery，我建议你看看这个分页插件：@James Allardice，这看起来像个不错的插件。如果我有一个更大的数据集，我肯定会考虑使用它。谢谢！是的！这正是我要找的！fadeIn看起来不错！我不确定为什么，但在运行时，“show more”锚不合适无法正确创建。当我在google chrome下检查时，我发现以下错误：“uncaught TypeError:Object#has no method'last'”@whoabackoff您是在我的JSFIDLE上还是在您自己的实现上发现这个错误的，因为它在chrome中运行良好。
last（）
是在jQuery版本1.4中添加的，因此如果您使用的是较旧的版本，那么您可以通过将
.last（）
替换为
.filter（“：last”）
来获得相同的结果。您的JSFIDLE工作得很好。这是一个jQuery版本的问题，现已全部修复。谢谢！：）我不想修改我的div列表，而且，我只想有一个'More'按钮。这非常类似于Igor的answergreat实现，它处理每页可变数量的初始结果和结果。谢谢！这也是一个处理'Previous'和'Next'的伟大实现。唯一的问题是，如果列表小于nav的6igation链接仍将可见。