Question

我正在尝试以3个为一组选择<li>，目前我正在使用此:gt和:lt

 $('.events_list li:lt(7):gt(3)').css('display', 'block');

这没关系，但似乎可能有更好的方法。我只想点击一个按钮，然后选择下一个3 <li>。

Answer 1

尝试

var triplet = 0;

$('button').click(function(){
    $('.events_list li')
        .hide() // hide the ones that are visible
        .filter(function(i){
            return i >= triplet*3 && i < (triplet+1)*3; // filter the next 3
        })
        .show(); // and show them

    triplet++;
});

演示 http://jsfiddle.net/PyEhU/

Answer 2

您也可以尝试nextUntil：

$('.events_list li:eq(3)').nextUntil('.events_list li:eq(7)').css('display', 'block');

Answer 3

jQuery("ul li").filter(function(index,el){return index>3 && index<7}).css('display', 'block');

试试这个。

Answer 4

Gaby's answer对我来说效果很好（如果可以的话我会赞成它），但我的用例需要一个循环，而$ .filter的一个问题就是它遍历每个循环传递中的所有元素。所以我使用slice代替，它允许您从一组中选择元素。它还使代码稍微简单一些。作为额外的奖励，我将选择器移出功能，因为我认为列表本身不会改变，因此不需要一次又一次地选择它。

这是我的版本，基于Gaby的：

var triplet = 0;
var $elements = $('.events_list li');

$('button').click(function(){
    $elements
        .hide() // hide the ones that are visible
        .slice( triplet*3, (triplet+1)*3)
        .show(); // and show them

    triplet++;
});

http://jsfiddle.net/sf3N9/

演示

选择<li>分组3 </li>

4 个答案: