使用jquery显示有限数据

Question

如何限制附加数据？像分页一样。

例如，如果我有附加5条评论，它应该显示 3条最新评论，其他2条评论应该隐藏，并且应该在点击显示更多评论。我只想和Jquery一起做。

查看Js小提琴： http://jsfiddle.net/7jE9p/1/

请看一下这张图片。只是为了澄清我的观点：

我也在这里提供我的代码：

HTML：

      <p>
          <a href="javascript:void(0);" class="add_more">Add More</a>
      </p>

<table border="0" width="500" cellspacing="0">
   <tbody class="append_data"></tbody>

<tr>
  <td> 
      <textarea name="description" id="description"></textarea>
  </td> 
</tr> 

</table>

CSS：

#description{
    width:400px;    
}

.description_text{
    border:#333333 solid 1px;
    width:400px !important;
}

.append_data{
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

JQuery：

$('.add_more').click(function()
                     {
                        var description = $('#description').val();
                        $(".append_data").append('<div class="description_text">'+description+'</div><br><br>');
                     });

Answer 1

var comments = $('.description_text').size();
if (comments > 3) {
    $('.description_text').slice(0,comments-3).hide();
}

但是您需要更新代码以删除BR并添加一些css填充，浮动或类似。

http://jsfiddle.net/7jE9p/3/