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()方法非常有用。