今天项目中遇到要获取前几个和最后几个元素,查了资料发现了这个slice()方法很实用,废了一番功夫终于明白怎么用的了。
slice(start[,end]):start类型:Integer
开始选取子集的位置。第一个元素是0.如果是负数,则可以从集合的尾部开始选起。
end (可选)类型:Integer
结束选取自己的位置,如果不指定,则就是本身的结尾。
如果提供的jQuery代表了一组DOM元素,slice()方法从匹配元素的子集中构造一个新的jQuery对象。所提供的start索引标识的设置一个集合中的元素的位置;如果end被省略,这个元素之后的所有元素将包含在结果中。
例如:
<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>
1. $(‘li‘).slice(2).css(‘background-color‘, ‘red‘);
上述代码的执行结果是,第
3,4,5 项列表项的背景色变成了红色。注意,索引是从 0 开始计数的,并且代表的是 jQuery
对象中的元素位置。
2.$(‘li‘).slice(2, 4).css(‘background-color‘, ‘red‘);
上述代码的执行结果是,只有第
3 和第 4 项列表项会被选中。索引依然是从 0 开始计数的,但是在被选中的元素中不包括 end 参数所指定的元素。
3.负索引
jQuery的.slice()方法是仿照的JavaScript
数组的.slice()方法。其中的一个功能就是允许传入负的 start 和 end 参数。如果传递的是负数,那么下标位置是从结尾开始的,而不是从起始位置开始。例如:
$(‘li‘).slice(-2,
-1).css(‘background-color‘, ‘red‘);
结果只有项4是变成了红色,因为它是唯一满足条件的列表项,即被选中的元素是从倒数第二个元素(-2)开始到最后一个元素(-1 )(不含此元素)之间的元素。
$(‘li‘).slice(-2).css(‘background-color‘, ‘red‘);
结果第4,5项是变成了红色,即被选中的元素是从倒数第二个元素开始到最后一个元素(包含此元素)之间的元素。