When there are multiple instances of the selected elements in jQuery, if we want to add particular properties or select elements from a particular index to another index the slice() method in jQuery can be used. Using jQuery’s slice we can add properties to only the range of elements we want to add the property. It is a 0 based indexing.
Syntax:
$('selector').slice(start_index,end_index);Note:
- If both start_index and end_index are given all the elements from the start index to the index before the end index gets considered.
- If the only start_index is given in parameters all the elements from that index to end will get considered.
- If it is negative it gets considered from the end.
Example:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Including jQuery -->
<script
src=
letegrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: auto;
height: 30px;
}
body {
text-align: center;
}
h1 {
color: black;
}
div {
margin: 10px;
height: 50px;
width: 50px;
position: relative;
float: left;
text-align: center;
display: flex;
border: 3px solid black;
}
</style>
</head>
<body>
<h1 style="color: #006600">GeeksforGeeks</h1>
<button id="slice1">slice(0,5)</button>
<button id="slice2">slice(1,3)</button>
<button id="slice3">slice(4)</button>
<button id="slice4">slice(-5)</button>
<hr />
<div>
<h1>0</h1>
</div>
<div>
<h1>1</h1>
</div>
<div>
<h1>2</h1>
</div>
<div>
<h1>3</h1>
</div>
<div>
<h1>4</h1>
</div>
<div>
<h1>5</h1>
</div>
<div>
<h1>6</h1>
</div>
<div>
<h1>7</h1>
</div>
<div>
<h1>8</h1>
</div>
<div>
<h1>9</h1>
</div>
<div>
<h1>10</h1>
</div>
<div>
<h1>11</h1>
</div>
<script>
$(document).ready(function () {
$("#slice1").click(function () {
$("div").slice(0, 5).css("background-color", "#006600");
});
$("#slice1").dblclick(function () {
$("div").slice(0, 5).css("background-color", "white");
});
$("#slice2").click(function () {
$("div").slice(1, 3).css("background-color", "#006600");
});
$("#slice2").dblclick(function () {
$("div").slice(1, 3).css("background-color", "white");
});
$("#slice3").click(function () {
$("div").slice(4).css("background-color", "#006600");
});
$("#slice3").dblclick(function () {
$("div").slice(4).css("background-color", "white");
});
$("#slice4").click(function () {
$("div").slice(-5).css("background-color", "#006600");
});
$("#slice4").dblclick(function () {
$("div").slice(-5).css("background-color", "white");
});
});
</script>
</body>
</html>
|
Output: