基于jQuery实现点击列表加载更多效果

本文实例为大家分享了jQuery点击加载更多效果的具体代码，供大家参考，具体内容如下

  
  
  
  


  

    
a
    
b
    
c
    
d
    
e
    
f
    
g
    
h
    
i
    
j
    
k
    
m
    
a
    
b
    
c
    
d
    
e
    
f
    
g
    
h
    
i
    
j
    
k
    
m
  
 
  

    
news 11
    
news 12
    
news 13
    
news 14
    
news 21
    
news 22
    
news 23
    
news 24
    
news 31
    
news 32
    
news 33
    
news 34
  
 
  


JavaScript code
 
(function () {
  var showMoreNChildren = function ($children, n) {
    //显示某jquery元素下的前n个隐藏的子元素
    var $hiddenChildren = $children.filter(":hidden");
    var cnt = $hiddenChildren.length;
    for (var i = 0; i < n && i < cnt ; i++) {
      $hiddenChildren.eq(i).show();
    }
    return cnt - n;//返回还剩余的隐藏子元素的数量
  }
 
  jQuery.showMore = function (selector) {
    if (selector == undefined) { selector = ".showMoreNChildren" }
    //对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
    $(selector).each(function () {
      var pagesize = $(this).attr("pagesize") || 10;
      var $children = $(this).children();
      if ($children.length > pagesize) {
        for (var i = pagesize; i < $children.length; i++) {
          $children.eq(i).hide();
        }
 
        $("
显示更多
").insertAfter($(this)).click(function () {
          if (showMoreNChildren($children, pagesize) <= 0) {
            //如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
            $(this).hide();
          };
        });
      }
    });
  }
})();

以上就是本文的全部内容，希望对大家的学习有所帮助。