0

私は自分の 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();
});
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 は "less then" (以下ではありません) であることに注意してください。

補足: 現在の 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 に答える