jquery slice筛选指定位置的元素

定义和用法

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

语法

1
.slice(_selector_,_end_)















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

如果是负数,则指示从集合末端开始的偏移量。
end基于 0 的整数值,指示结束选取元素的位置。

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

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

详细说明

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

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

1
2
3
4
5
6

* list item 1
* list item 2
* list item 3
* list item 4
* list item 5

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

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

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

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

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

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

负的指数

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

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

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

示例代码:

产品默认全部加载出来,但是只显示第一行的4个,然后点击‘更多’后,就额外显示一行4个出来,再点击就再显示一行,直到显示完为止

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(function () {
var homeProductSlider = $('.home-product-slider');
var sliderProductList = homeProductSlider.find('ol.product-items');
var sliderProductListLi = homeProductSlider.find('li');
var show_more_products_butn_box = homeProductSlider.find('div.show_more_products_butn_box');
var show_more_products_butn_boxClick = show_more_products_butn_box.find('a.show_more_products_butn');
var liLength = sliderProductListLi.length;
if(liLength > 4){
sliderProductListLi.slice(4,liLength).hide();
var startIndex = 4;
show_more_products_butn_boxClick.click(function(){
console.log(startIndex);
var endIndex = startIndex+3;
if(endIndex >= liLength){
show_more_products_butn_box.hide();
}
sliderProductListLi.slice(startIndex,endIndex).show();
startIndex = endIndex;
return false;
})
}else{
show_more_products_butn_box.hide();
}
homeProductSlider.show();
});

 

坚持原创技术分享,您的支持将鼓励我继续创作!