Question

我正在寻找一种方式来说我的div孩子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();
});

Answer 1

使用

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

例如

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

不要忘记:lt()和:gt()需要索引。

Answer 2

为什么不用for-loop循环遍历它们？

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

伪代码：

$('.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();

        })

Answer 3

如何使用：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'开始，然后是“小于”（不小于或等于）。

旁注：如果您正在使用当前的jQuery，则应切换到“on（）”以进行绑定操作。

jQuery的persudo短代码

3 个答案: