Question

我有以下示例列表：

<div class="data-box">
        <div class="prev-next"><a href="">Prev <i class="uparrow-icon"></i></a></div>
        <ul class="hours-list">

                <li class="extra-hour"> 4:45 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 5:23 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 6:00 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 6:19 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 6:37 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 6:55 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 7:12 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 7:28 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 7:44 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 8:00 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 8:16 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 8:33 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 8:50 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 9:08 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 9:27 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 9:47 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 10:07 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 10:27 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 10:47 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 11:07 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 11:27 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 11:47 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 12:07 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 12:27 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 12:47 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 13:07 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 13:27 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 13:47 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 14:08 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 14:30 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 14:53 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 15:15 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 15:36 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 15:56 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 16:16 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 16:36 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 16:56 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 17:16 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 17:36 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 17:56 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 18:21 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 18:46 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 19:11 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 19:36 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 20:01 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 20:26 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 20:51 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 21:16 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 21:42 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 22:08 h. <i class="plus-icon"></i></li>

                <li class="extra-hour"> 22:35 h. <i class="plus-icon"></i></li>



        </ul> 
        <div class="prev-next"><a href="">Next <i class="downarrow-icon"></i></a></div>
    </div>

我希望当我按下prev和next时，分别转到下一个或前五个元素。所有其他元素都是隐藏的，不可见。你怎么能用JQuery做到这一点？

早期的节目设置li，但是对于这个例子，我们都隐藏了。然后按next并从列表中显示下一个5项并隐藏当前的5，这可以通过例如slidetoggle等完成。当按下prev时，显示前5个并隐藏其余部分。

Answer 1

var current = 0;

当您点击上一个或下一个时，您将-5或+5到current您将隐藏.hours-list元素中的所有li元素

$( '.hours-list' ).children().hide();

在for循环中显示那些5添加到当前i

$( '.hours-list' ).children().eq(current + i).show();

Answer 2

我曾多次使用过Jquery Quick Pagination plugin

非常简单易行。您可以这样使用它：

$("ul.hours-list").quickPagination({pagerLocation:"both",pageSize:"3"});

希望它有所帮助！

JQuery ul li点击移动到列表中的下五个元素

2 个答案: