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

JQuery ul li click move to next five elements in list

本文关键字：元素 五个 li ul 移动 列表 JQuery      更新时间：2023-09-26

我有以下示例列表：

<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>

我希望当我按下上一个和下一个时，分别转到下一个或前五个元素。所有其他元素都是隐藏的，不可见。如何使用JQuery做到这一点？

早期的节目设定了李，但对于这个例子，我们都隐藏起来了。然后按下next，应该会显示列表中的下5个项目，并隐藏当前的5个项目。例如，这是通过滑动切换或其他方式完成的。按下prev时，显示前5个并隐藏其余部分。

var current = 0;

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

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

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

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

我曾多次使用Jquery快速分页插件

它非常简单。你可以这样使用：

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

希望它能有所帮助！

相关文章：