【问题标题】:Opposite of jquery slice / select items outside of slicejquery slice 的对面/选择 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”或其他核心函数。

感谢大家的指点!

【问题讨论】:

    标签: jquery slice


    【解决方案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/

      【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-01-01
      • 2020-12-31
      • 1970-01-01
      • 2012-05-19
      • 2017-07-26
      • 2021-11-24
      • 2021-06-19
      • 2016-03-03
      相关资源
      最近更新 更多