jQuery 筛选 slice() 区间(范围)选择器

た入场券 2021-10-19 04:42 308阅读 0赞

slice()是一个可指定区间(范围)过滤的方法。使用率很低，一般接手项目或功能新增需求时会用到。

设场景：有100个用户，需要每次显示10个，轮循依次切换。

在允许修改布局结构的情况下，更推荐将数据10个分为一组，通过 eq() 方法即可快速的实现轮循切换效果。

> 小编原创文章：[《jQuery 筛选 eq()》][jQuery _ eq]  
> 文章地址：[https://blog.csdn.net/u013350495/article/details/93496829][jQuery _ eq]

若当前布局结构如下方源码所示：

<ul id="list">
        <li>博客：黄河爱浪</li>
        <li>昵称：helang</li>
        <li>QQ：1846492969</li>
        <li>公众号web-7258</li>
        <li>邮箱：helang.love@qq.com</li>
    </ul>

在未分组的情况下，要获取指定区间的元素。。emmmm。。该是今天主角 slice() 登场的时候了。

## $( selector ).slice(start,end) ##

*  方法说明：根据指定的下标范围，过滤匹配的元素集合，并生成一个新的 jQuery 对象
 *  参数 start：一个整数，从 0 开始计数的下标。代表将要被选择的元素的起始下标。
 *  参数 end：一个整数，从 0 开始计数的下标。代表将要被选择的元素的结束下标（并不包含结束下标元素）。如果忽略此参数，则选择的范围是从 start 开始，一直到最后。

源码示例：

/*
        常规使用，指定开始和结束下标
        获取从下标1至下标3之间的元素，不包含下标3元素
    */
    console.log($("#list>li").slice(1,3));   // [昵称,QQ]
    
    /*
        缺省结束下标
        获取从下标3后的所有元素，包含下标3元素
    */
    console.log($("#list>li").slice(3));   // [公众号,邮箱]

在官方的文档中有说明可以传递负数可以倒序筛选，然而小编测试了一哈，完全没看出有什么鸟作用。

有需要了解倒序查找的伙伴们，可以阅读本篇文章中前面提到的 [《jQuery 筛选 eq()》][jQuery _ eq] 文章学习。

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[jQuery _ eq]: https://blog.csdn.net/u013350495/article/details/93496829
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20211018/da80c7105f31428580eb8c8971eac92e.png