【问题标题】:Put a Limit to Appended Data (Like Pagination) - JQuery限制附加数据(如分页) - JQuery
【发布时间】:2013-09-21 01:58:42
【问题描述】:

如何限制附加数据?类似于分页。

例如,如果我附加了 5 个 cmets,它应该显示 3 个最新的 cmets,其他 2 个 cmets 应该隐藏并且应该在点击显示更多评论。我想用 Jquery 做的所有事情。

查看 Js Fiddle: 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>');
                     });

【问题讨论】:

    标签: javascript jquery html css pagination


    【解决方案1】:

    为每个评论附加 div 元素并使用“.slice”显示最后 3 个并隐藏其余部分。 api.jquery.com/slice 是您应该寻找的东西。

    $(".comment_container").slice(0, -3).hide(); //will hide divs except the last 3.
    

    【讨论】:

    • 你能更新我的小提琴吗?
    猜你喜欢
    • 2013-05-04
    • 2015-09-04
    • 2016-12-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-23
    相关资源
    最近更新 更多