0

我正在寻找一种方法来说我的 div child li:nth-child(1) - li:nth-child(5) 先隐藏，然后当用户单击某个按钮时，显示 child(6) - 10。下面是更长的代码版本：

$('.history_presss ul li').hide();
$('.history_presss ul li:nth-child(1)').show();
$('.history_presss ul li:nth-child(2)').show();
$('.history_presss ul li:nth-child(3)').show();
$('.history_presss ul li:nth-child(4)').show();
$('.history_presss ul li:nth-child(5)').show();
$('ul.jPag-pages li:nth-child(1)').click(function(){
  $('.history_presss ul li').hide();
  $('.history_presss ul li:nth-child(1)').show();
  $('.history_presss ul li:nth-child(2)').show();
  $('.history_presss ul li:nth-child(3)').show();
  $('.history_presss ul li:nth-child(4)').show();
  $('.history_presss ul li:nth-child(5)').show();
});
$('ul.jPag-pages li:nth-child(2)').click(function(){
  $('.history_presss ul li').hide();
  $('.history_presss ul li:nth-child(6)').show();
  $('.history_presss ul li:nth-child(7)').show();
  $('.history_presss ul li:nth-child(8)').show();
  $('.history_presss ul li:nth-child(9)').show();
  $('.history_presss ul li:nth-child(10)').show();
});
4

3 回答 3

2

利用

:lt(), :gt()代替nth-child()

例如

$('.history_presss ul li:lt(5)').show();
$('.history_presss ul li:gt(4)').hide();

不要忘记:lt()并:gt()采取索引。

于 2012-07-19T07:26:00.207 回答
0

使用 :lt() 和 :gt() 选择器怎么样？

代码可能如下所示：

$('.history_presss ul li').hide();
$('.history_presss ul li:lt(4)').show();
$('ul.jPag-pages li:nth-child(1)').on('click', function(){
    $('.history_presss ul li').hide();
    $('.history_presss ul li:lt(4)').show();
})
$('ul.jPag-pages li:nth-child(2)').on('click', function(){
    $('.history_presss ul li').hide();
    $('.history_presss ul li:gt(4)').show();
})

但请注意，计数以 '0' 开头，并且 lt 是“小于”（不小于或等于）。

附带说明：如果您使用的是当前的 jQuery，您应该切换到“on()”来进行绑定操作。

于 2012-07-19T07:30:27.453 回答
0

你为什么不直接用 for 循环遍历它们呢？

创建一个索引变量并将其添加到您的代码中。

伪代码：

$('.history_presss ul li').hide();
   for (int i = 1; i < 6; i++)
        $('.history_presss ul li:nth-child(' + i + ')').show();

        $('ul.jPag-pages li:nth-child(1)').click(function(){
            $('.history_presss ul li').hide();
            for (int i = 1; i < 6; i++)
               $('.history_presss ul li:nth-child(' + i + ')').show();
        })
        $('ul.jPag-pages li:nth-child(2)').click(function(){
            $('.history_presss ul li').hide();
            for (int i = 6; i < 11; i++)
               $('.history_presss ul li:nth-child(' + i + ')').show();

        })
于 2012-07-19T07:17:24.730 回答