jquery列表中的下一个上一个仅显示5并隐藏其他

Question

我正在尝试这样做。我从表中获取 DATE 列表并将它们显示为列表，并希望 prev 和 next 遍历这些日期在任何时候只显示 5。例如，当页面加载时，我将显示最近的 5 个日期，当单击上一个/下一个时，让它遍历“列表”（从表中预先填充）并相应地显示。这就像分页，但我真的不想使用分页插件，因为我的要求非常简单。单击每个列表/href 时，它会通过 ajax 加载内容，此处未显示，因为这对我来说很好。

我只需要帮助让这个“上一个”和“下一个”遍历列表（已经从表中拉出）并在它遍历时只显示 5 个隐藏的休息。 jsfiddle附在这里。请帮忙。谢谢。

jQuery:

  $( document ).ready(function() {

    $("a.next").click(function(){
        var $toHighlight = $('.active').next().length > 0 ? $('.active').next() : $('.pagination li').first();
        $('.active').removeClass('active');
        $toHighlight.addClass('active');
    });

    $("a.prev").click(function(){
        var $toHighlight = $('.active').prev().length > 0 ? $('.active').prev() : $('.pagination li').last();
        $('.active').removeClass('active');
        $toHighlight.addClass('active');
    });

}); // close jquery

HTML/PHP：

echo "

<div class='pagination pagination-lg'>

<ul class='pagination'>

";
$CID=getinfo(LOGIN);
$SQL = "SELECT DISTINCT date_format(SENTON,'%Y-%m-%d') as DATE from MESSAGES";

$result = mysql_query($SQL,$LINK);
$i=0;
echo "<li id='prev'><a href='#' class='prev'>Prev</a></li>";
while ( $rows = mysql_fetch_array($result,MYSQLI_ASSOC) ) {
  $i++;
 echo "<li><a href='#tab".$CID."day".$i."' id='#tab".$CID."day".$i."' data-toggle='tab' value='$i'>".$rows['DATE']."</a></li>";
 }

 echo "
 <li id='next'><a href='#' class='next'>Next</a></li></ul>

<div id='tab".$CID."day1' class='tab-pane'>
<h4>Day1  Content</h4>
  <p> and so on ...</p>
</div>
<div id='tab".$CID."day2' class='tab-pane'>
  <h4>Day2 Content</h4>
</div>
<div id='tab".$CID."day3' class='tab-pane'>
  <h4>Day3 Content</h4>
</div>

  <div id='tab".$CID."day4' class='tab-pane'>
  <h4>Day4 Content</h4>
</div>

    <div id='tab".$CID."day5' class='tab-pane'>
  <h4>Day5 Content</h4>
</div>

</div>
</div>
 ";

Jsfiddle 在这里http://jsfiddle.net/Mg8fr/

Answer 1

试试

$(document).ready(function () {
    var $pagination = $('.pagination');
    var $lis = $pagination.find('li:not(#prev, #next)');
    $lis.filter(':gt(4)').hide();
    $lis.filter(':lt(5)').addClass('active');

    var $next = $("#next").click(function () {
        var idx = $lis.index($lis.filter('.active:last')) || 0;

        var $toHighlight = $lis.slice(idx + 1, idx + 6);
        if ($toHighlight.length == 0) {
            $prev.show();
            return;
        }

        $next.show();        
        $lis.filter('.active').removeClass('active').hide();
        $toHighlight.show().addClass('active')
    });

    var $prev = $("#prev").click(function () {
        var idx = $lis.index($lis.filter('.active:first')) || 0;

        var start = idx < 4 ? 0 : idx - 4;
        var $toHighlight = $lis.slice(start, start + 5);
        if ($toHighlight.length == 0) {
            $prev.hide();
            return;
        }      

        $next.show();
        $lis.filter('.active').removeClass('active').hide();
        $toHighlight.show().addClass('active')
    });

}); // close jquery

演示：Fiddle

Answer 2

你可能想要这个

$( document ).ready(function() {
    $('ul.pagination li').eq(5).nextAll().not('#next').hide().andSelf().siblings().eq(1).addClass('active');
    $("a.next").click(function(){
    var $toHighlight = $('.active').next().not('a#next').length > 0 ? $('.active').next() : $('.pagination li').eq(1);
    if($toHighlight.attr('id') == 'next') {
        $('.active').removeClass('active');
        $('ul.pagination li').not('#next').not('#prev').hide()
        .eq(0).addClass('active').nextAll("*:lt(4)").andSelf().show();
    }
    else if(!$toHighlight.is(':visible')){
        $('.active').hide().removeClass('active');
        $toHighlight.nextAll("*:lt(5)").andSelf().show();
        $toHighlight.addClass('active').prevAll().not('#prev').hide();
    }
    else {
        $('.active').removeClass('active');
        $toHighlight.addClass('active');
        }
    });

    $("a.prev").click(function(){
        var $toHighlight = $('.active').prev().not('#prev').length > 0 ? $('.active').prev() : $('.pagination li').eq($('ul.pagination li').length-2);
        if($toHighlight.attr('id') == 'prev') {
            $('.active').removeClass('active');
            $('ul.pagination li').not('#next').not('#prev').hide();
            $('ul.pagination li#next').addClass('active');
            $('.active').prevAll("*:lt(4)").andSelf().show();
        }
        else if(!$toHighlight.is(':visible')){
            $('.active').removeClass('active');
             $('ul.pagination li').not('#next').not('#prev').hide();
             $toHighlight.addClass('active').prevAll("*:lt(4)").andSelf().show();
        }
        else {
            $('.active').removeClass('active');
            $toHighlight.addClass('active');
        }
    });

}); // close jquery

DEMO.