jQuery中slice()
时间:2020-02-23 14:45:59 来源:igfitidea点击:
前面我们看过如何在jQuery中获取具有特定索引的元素,但有时我们想要获取元素索引数组的子集。
我们可以使用slice()
方法。
jQuery slice()
slice()方法将匹配的元素集减少为由一系列索引指定的子集。
此方法接受两个整数值,开始索引和结束索引。
此方法将返回开始索引和结束索引之间的元素。
元素子集包括开始索引处的元素,但不包括结束索引处的元素。
这是使用jQuery slice()的一般语法
- selector.slice(开始,结束)
start:这是一个强制性参数,用于指定开始选择元素的起始索引。
索引编号从0开始。
使用负数表示从匹配的元素集的末尾偏移。
end:这是一个可选参数,用于指定停止选择元素的结束索引。
如果我们省略结束索引,选择范围将一直持续到匹配集的结束。
jQuery slice()示例
以下示例演示了jQuery slice()的用法。
<!doctype html> <html> <head> <title>jQuery Traversing slice</title> <style> .highlight{ background: yellow; } .highlight1{ background: green; } div{ display: block; border: 3px solid black; color: black; padding: 5px; margin: 25px; width:250px; } </style> <script src="https://code.jquery.com/jquery-2.1.1.js"></script> </head> <body> <h2>jQuery slice() demo</h2> <div>My index is 0, also -6 from last</div> <div>My index is 1, also -5 from last</div> <div>My index is 2, also -4 from last</div> <div>My index is 3, also -3 from last</div> <div>My index is 4, also -2 from last</div> <div>My index is 5, also -1 from last</div> <script> $( "div" ).slice( 0,2).addClass("highlight1"); $( "div" ).slice( -3,-1 ).addClass("highlight"); </script> </body> </html>
在此示例中,我们对开始和结束参数使用了正索引和负索引。
$(" div").slice(0,2).addClass(" highlight1");":这将在开始索引0和结束索引2之间选择div元素,并将颜色更改为绿色。
该行中使用的slice()方法与slice(-6,-4);
相同。
$(" div").slice(-3,-1).addClass(" highlight");"这将在开始索引-3和结束索引-1之间选择div元素,并将颜色更改为黄色。
该行中使用的slice()方法与slice(3,5);
相同。
当您想从匹配集中获取元素的子集时,jQuery slice()方法非常有用。