JQuery показать этот номер ул ли

Question

Это, наверное, глупый вопрос, но я часами гуглял без удачи .. У меня есть несколько уль-ли, как это:

     <li><a href="#" class="pa">..</a></li>
     <li><a href="#" class="pa">..</a></li>
     <li><a href="#" class="pa">..</a></li>
     <li><a href="#" class="pa">..</a></li>
     <li><a href="#" class="pa">..</a></li>

Как мне показать только определенный набор li? Значит только от 1 до 3 или от 1 до 4 и скрыть остальных? Я хотел бы сделать это в соответствии с var как:

     var number_of_list = 5; {
            if (some_results > 5)
            {
                ...'show 5 ul li with jquery'...
}

Если это невозможно, то я бы хотел сделать это с таким событием, как:

$(input).keyup(function() {
  number_of_list = 5;
$(ul li)....show 5 ul li...(which is number_of_list of course) ;
});

Answer 1

В jQuery вы можете сделать что-то вроде этого:

$('ul li').hide().filter(':lt(4)').show(); 

это начнется с того, что все элементы li будут скрыты, а затем показаны первые 4 - вы можете просто изменить номер, чтобы показать первый #

Чтобы использовать переменную, сделайте следующее:

 var myvar = 5;
 $('ul li').hide().filter(':lt('+myvar+')').show(); 

Answer 2

Использование селекторов jQuery :gt() (индекс больше чем) и :lt (индекс ниже чем) http://jsfiddle.net/blackpla9ue/sabnE/

$('li:gt(1):lt(4)').addClass('col'); добавит класс 'col' к индексу 1-4 lis

Answer 3

Вот, пожалуйста:

​<ul>
     <li><a href="#" class="pa">..</a></li>
     <li><a href="#" class="pa">..</a></li>
     <li><a href="#" class="pa">..</a></li>
     <li><a href="#" class="pa">..</a></li>
     <li><a href="#" class="pa">..</a></li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​

 var number_of_list = 2;
 $("li").css("background", "#b4b0da")
        .filter(function (index) {
               return index >number_of_list-1; //because index starts with 0
        })
        .css("display", "none");​

Демо