jquery slice 的对面/选择 slice 外的项目

Posted 2023-02-23

【中文标题】jquery slice 的对面/选择 slice 外的项目

【英文标题】：Opposite of jquery slice / select items outside of slice

【发布时间】：2012-10-15 17:24:12

【问题描述】：

我有一个 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）来做到这一点，但想知道是否有一种更简洁的方法来使用类似“not”或其他核心函数。

感谢大家的指点！

【参考方案1】：

由于性能对每个人都应该很重要，因此 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

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

【参考方案2】：

你可以像这样使用 .not()

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

FIDDLE

【讨论】：

实际上，我刚刚得到了完全相同的东西！谢谢。我会尽快接受。

有一个更快的解决方案，请参阅我的或 Kevin B 的答案

【参考方案3】：

你也可以使用.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/

【讨论】：

.not() 与.filter() 相同，但结果相反。