jQuery 遍历 - slice() 方法

简介:

实例

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

$("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) 的之间的范围中的唯一项目。

本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/4627389.html ,如需转载请自行联系原作者
相关文章
|
1月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
9 0
|
3月前
|
JavaScript
jQuery追加节点方法 和height方法与width方法
jQuery追加节点方法 和height方法与width方法
|
3月前
|
JavaScript 前端开发
调用jQuery的animate()方法无法移动的问题
调用jQuery的animate()方法无法移动的问题
|
3月前
|
JavaScript 前端开发 UED
jQuery 自动刷新页面但不闪烁的实现方法
jQuery 自动刷新页面但不闪烁的实现方法
|
4月前
|
JavaScript 前端开发
jQuery学习(十二)—jQuery中对象的查找方法总结
jQuery学习(十二)—jQuery中对象的查找方法总结
|
2天前
|
JavaScript CDN
jQuery方法小记
jQuery方法小记
12 0
|
3月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
19 0
|
3月前
|
JavaScript 前端开发
原生js与jQuery显示隐藏div的几种方法
原生js与jQuery显示隐藏div的几种方法
38 0
|
3月前
|
JavaScript
jquery的遍历
jquery的遍历
|
3月前
|
JavaScript 前端开发 CDN
jQuery文件下载方法及引入HTML语法
去jQuery网站下载文件包,点击主页的“Download”之后,进入下载页面,可以选择production版本的进行下载,但是点击进去之后,浏览器并不会直接下载相关的文件,而是跳转到一个“密密麻麻”都是jQuery代码的页面,仔细查看浏览器地址栏中的url便可知,该页面其实就是jQuery的min版的文件,可以使用下面这种方法,下载jQuery文件
65 5