Question

我有一个javascript（jQuery）分页系统，它通过隐藏页面上的项目并使用带有复选框的过滤器来工作。它工作正常，但我现在试图对这个动态结果集进行分页，所以我想要隐藏特定范围之外的所有项目。

jQuery slice函数看起来很适合这种情况，只选择范围内的所有项目。我想做的是与此相反。我想选择范围之外的所有项目。

HTML: 
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
</ul>

jQuery:
$(function(){
    $('li').slice(3,6).css('background','#f00'); 
});

我把小提琴放在一起：http://jsfiddle.net/SLuXz/1/ - 我想做的是让第1,2,3,7,8,9和10项以红色显示。我知道我可以用两个切片（0-3和7-10）做到这一点，但是想知道是否有一种更简洁的方式来做这样的事情，比如＆＃39;不是＆＃39;或其他核心功能。

感谢任何人们的指点！

Answer 1

您可以像这样使用.not（）

$(function(){
    $('li').not($('li').slice(3,6)).css('background','#f00'); 
});

FIDDLE

Answer 2

您也可以使用.filter：

$(function(){
    $("li").filter(function(i) { 
        return i < 3 || i > 5;
    }).css(...);
});

或

$(function(){
    $("li").filter(":lt(3),:gt(5)").css(...);
});

或（可能效率较低）

$(function(){
    $("li:lt(3),li:gt(5)").css(...);
});

http://jsfiddle.net/CYVPh/1/

Answer 3

由于表演应该对每个人都很重要，Dan的回答绝对不应该是接受的答案，因为它的速度是使用Kevin B的答案的三倍。

如果我们运行此代码

var Start =  new Date().getTime();
for(i = 0; i<10000; i++){
    //How Dan's answer suggests to do this
    var e = $('.elem').not($('.elem').slice(0,99));
}
var Finish = new Date().getTime();
console.log('Using selector filter',Finish-Start);

var Start =  new Date().getTime();
for(i = 0; i<10000; i++){
    //A better way to do Dan's answer, but still twice as slow 
    var o = $('.elem');
    var e = o.not(o.slice(0,99));
}
var Finish = new Date().getTime();
console.log('Using selector filter',Finish-Start);

Start =  new Date().getTime();
for(i = 0; i<10000; i++){
    //The fastest method
    var e = $('.elem').filter(function(i) { 
        return i < 0 || i > 99;
    });
}
Finish = new Date().getTime();
console.log('Using object filter',Finish-Start);

观看控制台，我们得到了这个输出：

使用选择器过滤器989

使用选择器过滤器683

使用对象过滤器349

现在这可能不是一个非常低的数据使用问题，但在我的情况下，我正在检查可能相当多的表行，这将是非常重要的。

与切片之外的jquery切片/选择项相反

3 个答案: