实例

选中所有段落,然后将所选内容缩减为只包含第一和第二个段落:

$("p").slice(0, 2).wrapInner("");

亲自试一试

定义和用法

slice() 把匹配元素集合缩减为指定的指数范围的子集。

语法

.slice(selector,end)
参数 描述
selector

基于 0 的整数值,指示开始选取元素的位置。

如果是负数,则指示从集合末端开始的偏移量。

end

基于 0 的整数值,指示结束选取元素的位置。

如果是负数,则指示从集合末端开始的偏移量。

如果省略,则选取范围会在集合末端结束。

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象,.slice() 方法用匹配元素的子集构造一个新的 jQuery 对象。已应用的 index 参数集合中其中一个元素的位置;如果省略 end 参数,则 index 之后的所有的所有元素都会包含在结果中。

请思考这个带有简单列表的页面:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>

我们可以向列表项集合应用该方法:

$('li').slice(2).css('background-color', 'red');

亲自试一试

此次调用的结果是项目 3、4 和 5 的背景被设置为红色。请注意,已应用的 index 参数基于零,引用的是 jQuery 对象中元素的位置,而非 DOM 树中的。

end 参数允许我们更进一步地限制选取范围。比如:

$('li').slice(2, 4).css('background-color', 'red');

亲自试一试

现在,只有项目 3 和 4 会被选取。再次说明,index 是基于零的;范围会延伸到(但不包含)指定的 index。

负的指数

jQuery 的 .slice() 方法模仿了 JavaScript 数组对象的 .slice() 方法。它所模仿的特性之一是向 start 或 end 参数传递负数的能力。如果提供负数,则指示的是从集合结尾开始的一个位置,而非从开头。例如:

$('li').slice(-2, -1).css('background-color', 'red');

亲自试一试

这次,只有列表项 4 会变红,这是因为该项目是介于从结尾计数的二 (-2) 与从结尾计数的一 (-1) 的之间的范围中的唯一项目。

jQuery 遍历 - slice() 方法的更多相关文章

  1. jQuery遍历 slice()方法

    今天做页面,遇到一个滚动的swipe,需要4个<li> 一组,然后在外层加个<ul>,方法如下: $('.xxxxx li').each(function(n){ $('.xx ...

  2. jQuery 遍历 - parent() 方法

    ylbtech-jQuery-sizzle:jQuery 遍历 - parent() 方法  parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的. 1.A,jQuer ...

  3. jQuery 遍历 - eq() 方法 查找当前元素

    jQuery 遍历 - eq() 方法 if(data[i].status !='已送达'){ $('.w-beget').eq(i).attr('disabled','disabled'); }

  4. 【jQuery】slice()方法的使用

    [jQuery]slice()方法的使用  slice()方法:从已有的数组中返回选定的元素.  语法:          arrayObj.slice(start, end)             ...

  5. jQuery 遍历 - siblings() 方法

    本文来自:http://www.w3school.com.cn/jquery/traversing_siblings.asp jQuery 遍历参考手册 实例 查找每个 p 元素的所有类名为 &quo ...

  6. jQuery遍历节点方法汇总

    1.children()方法:$('div').children()---遍历查找div元素的所有子元素节点 <p>Hello</p> <div> <span ...

  7. jQuery 遍历 - closest() 方法

    jQuery 遍历参考手册 实例 本例演示如何通过 closest() 完成事件委托.当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景: $( document ).bind("c ...

  8. jquery遍历DOM方法总结

    1.jQuery 遍历 - 祖先 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery ...

  9. jQuery 遍历 - children() 方法

    jQuery 遍历参考手册 实例 找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色: $("div").children(" ...

随机推荐

  1. iOS 工厂方法模式

    iOS工厂方法模式 什么是工厂方法模式? 工厂方法模式和简单工厂模式十分类似,大致结构是基本类似的.不同在于工厂方法模式对工厂类进行了进一步的抽象,将之前的一个工厂类抽象成了抽象工厂和工厂子类,抽象工 ...

  2. IOS GCD 浅析

     一.简单介绍 1.队列的类型:      1.1主队列:main queue 主线程队列,更新UI的操作.是一个串行的队列,串行队列每次只处理一个任务.      1.2系统创建的并发队列:glob ...

  3. 我遇到的CocoaPods的问题(也许后期会解决,持续更新)

    在此博客中写下两类关于CocoaPods的问题: 未解决的问题:可以留着以后解决 已经解决的问题:可以备份以后回头再参考解决同样的问题 <已解决的问题> 解决方法是:pod install ...

  4. Android分辨率适配心得

    关于Android分辨率适配,这个是Android开发很头疼的一个问题,也需要花费相当一部分开发时间处理的一个问题,往往一个界面怎么适配就得想半天,特别是新手,也经常有人问我是怎么适配分辨率的,我也不 ...

  5. python启动服务器

    3.*             python -m http.server [port] & 2.*             python -m SimpleHTTPServer [port] ...

  6. 如何成功发布一个MSMQ的Windows服务

    因为MSMQ的使用需要不断的查看队列是否有新消息,所以一般是结合Windows的服务,当然也可以用一个不关闭的Winform程序,不过前者更好一些,不怕被人误关. 完成MSMQ的WindowsServ ...

  7. Java内存模型的历史变迁

    转自:http://www.csdn.net/article/2015-05-20/2824722-Java 摘要:本文通过介绍Java的新/旧内存模型,来展示Java技术的历史变迁. 本文通过介绍J ...

  8. 深入PHP内核之面向对象总结

    很久以前看过的,今天总结一下 一.PHP中创建一个类 在PHP中创建一个简单的类是这样的: <?php $obj = new test($url) ?> 二.zend_class_entr ...

  9. 【nginx】配置文件的优化

    1.编译安装过程优化 在编译Nginx时,默认以debug模式进行,而在debug模式下会插入很多跟踪和ASSERT之类的信息,编译完成后,一个Nginx要有好几兆字节.在编译前取消Nginx的deb ...

  10. select2使用

    一.简介 select2是Jquery用来代替选择框的一种组件.它让你可以定制下拉框,并且支持搜索.标记,远程数据源,无限滚动和其他更高级的功能.select2的下载地址为:https://selec ...