以 <li> 3 人为一组选择

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

你也可以试试 nextUn直到：

$('.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 的回答对我来说效果很好（如果可以的话，我会投赞成票），但我的用例需要一个循环，而 $.filter 的一个问题是它遍历了每个循环传递中的所有元素。所以我改用了切片，它允许你从集合中选择元素。它还使代码稍微简单一些。作为额外的好处，我将选择器移出了函数，因为我假设列表本身不会更改，因此无需一次又一次地选择它。

这是我的版本，基于盖比的版本：

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/演示