jQuery 遍历 - prevUntil() 方法 概述
jQuery 遍历 - prevUntil() 方法
实例
选中所有段落，然后将所选内容缩减为只包含第一和第二个段落：
$("p").slice(0, 2).wrapInner("");
完整实例：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<script>
$("p").slice(0, 2).wrapInner("<b></b>");
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
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');
完整实例：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<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>
<script>
$('li').slice(2).css('background-color', 'red');
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
此次调用的结果是项目 3、4 和 5 的背景被设置为红色。请注意，已应用的 index 参数基于零，引用的是 jQuery 对象中元素的位置，而非 DOM 树中的。
end 参数允许我们更进一步地限制选取范围。比如：
$('li').slice(2, 4).css('background-color', 'red');
完整实例：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<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>
<script>
$('li').slice(2, 4).css('background-color', 'red');
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
现在，只有项目 3 和 4 会被选取。再次说明，index 是基于零的；范围会延伸到（但不包含）指定的 index。
负的指数
jQuery 的 .slice() 方法模仿了 JavaScript 数组对象的 .slice() 方法。它所模仿的特性之一是向 start 或 end 参数传递负数的能力。如果提供负数，则指示的是从集合结尾开始的一个位置，而非从开头。例如：
$('li').slice(-2, -1).css('background-color', 'red');
完整实例：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<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>
<script>
$('li').slice(-2, -1).css('background-color', 'red');
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
这次，只有列表项 4 会变红，这是因为该项目是介于从结尾计数的二 (-2) 与从结尾计数的一 (-1) 的之间的范围中的唯一项目。
