persudo에 대한 jQuery 짧은 코드

Question

나는 내 div child li : nth-child (1) - li : nth-child (5)를 먼저 말하면 사용자가 버튼을 클릭 할 때 show child) - (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

이유에 대한 루프와 그들을 통해하지 방금 루프를합니까?

색인 변수를 만들고 코드에 추가하십시오.

의사 코드 :

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

사용 :lt() 및 :gt() 인덱스 소요 잊지 마세요 예를

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

에 대한

:lt(), :gt() 대신 nth-child()

.

Answer 3

: lt() 및 : gt() 선택기를 사용하는 방법은 어떻습니까?

• http://api.jquery.com/lt-selector/
• http://api.jquery.com/gt-selector/

코드는 다음과 같을 수 있습니다 :

$('.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()"으로 전환해야합니다.