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");

Demo

Jquery显示了这个数量的ul li

3 个答案: