Earlier we looked how to get an element with specific index in jQuery, but sometimes we want to get subset of the element indexes array. We can use slice()
method for this.
之前,我们研究了如何在jQuery中获取具有特定索引的元素 ,但有时我们想要获取元素索引数组的子集。 我们可以为此使用slice()
方法。
jQuery slice() (jQuery slice())
The slice()
method reduces the matched set of elements to a subset specified by a range of indices. This method accepts two integer values, start index and end index. This method will return the elements between the start and end index. The subset of elements includes the element at start index but excludes element at end index.
slice()
方法将匹配的元素集减少为由一系列索引指定的子集。 此方法接受两个整数值,开始索引和结束索引。 此方法将返回开始索引和结束索引之间的元素。 元素子集包括开始索引处的元素,但不包括结束索引处的元素。
Here is the general syntax for using jQuery slice()
这是使用jQuery slice()的一般语法
- selector.slice(start, end) selector.slice( 开始,结束 )
start: This is a mandatory parameter which specifies the starting index at which the elements begin to be selected. The index numbers start at 0 . Using a negative number indicates an offset from the end of the matched set of elements.
start :这是一个必需参数,它指定开始选择元素的起始索引。 索引编号从0开始。 使用负数表示从匹配的元素集的末尾偏移。
end: This is an optional parameter which specifies the ending index at which the elements stop being selected. The range of selection continues until the end of the matched set if we omit the end index.
end :这是一个可选参数,用于指定停止选择元素的结束索引。 如果我们省略结束索引,选择范围将一直持续到匹配集的结束。
jQuery slice()示例 (jQuery slice() example)
Following example demonstrates the jQuery slice() usage.
以下示例演示了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>
in this example, we have used both positive and negative indices for the start and end parameters.
在此示例中,我们对开始和结束参数都使用了正索引和负索引。
$( "div" ).slice( 0,2).addClass("highlight1");
: This will select the div elements between the start index 0 and end index 2 and changes the color to green. The slice() method used in this line is same as slice(-6,-4);
.
$( "div" ).slice( 0,2).addClass("highlight1");
:这将在开始索引0和结束索引2之间选择div元素,并将颜色更改为绿色。 该行中使用的slice()方法与slice(-6,-4);
。
$( "div" ).slice( -3,-1 ).addClass("highlight");
This will select the div elements between the start index -3 and end index -1 and changes the color to yellow. The slice() method used in this line is same as slice(3,5);
.
$( "div" ).slice( -3,-1 ).addClass("highlight");
这将在开始索引-3和结束索引-1之间选择div元素,并将颜色更改为黄色。 此行中使用的slice()方法与slice(3,5);
相同slice(3,5);
。
The jQuery slice() method is very useful when you want to get a subset of elements from the matched set. That’s all for now, we will look into more jQuery methods in coming posts.
当您想从匹配的集合中获取元素的子集时,jQuery slice()方法非常有用。 到此为止,我们将在以后的文章中研究更多的jQuery方法。
翻译自: https://www.journaldev.com/5387/how-slice-works-in-jquery