How to Select a Range of Elements using jQuery ?
Last Updated :
02 Mar, 2020
Given an HTML document with a range of similar elements and the task is to select a range of those elements with the help of JavaScript. There are two approaches that are discussed below with an example.
Approach 1: First, select all elements of class = ‘child’ by jQuery selector then use slice() method to select a range of elements continuously. The background color of the elements has been changed to see the effect.
- Example:
<!DOCTYPE HTML>
<html>
<head>
<title>
How to select a range of elements in JQuery
</title>
<script src=
</script>
<style>
h1 {
color: green;
}
.geeks {
color: green;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<center>
<h1>
GeeksforGeeks
</h1>
<b>
Click on button to select a range
of elements
</b>
<div class="outer">
<div class="child">
Child 1</div>
<div class="child">
Child 2</div>
<div class="child">
Child 3</div>
<div class="child">
Child 4</div>
</div>
<br>
<button onClick="gfg()">
click here
</button>
<p id="geeks">
</p>
</center>
<script>
var down = document.getElementById('geeks');
// Defining childs
var arr = [0, 2, 3];
function gfg() {
var $el = $(".outer .child");
for (var i = 0; i < arr.length; i++) {
$el.slice(arr[i], arr[i] + 1)
.css("color", "red");
}
down.innerHTML = "Range of elements selected";
}
</script>
</body>
</html>
|
-
Output:
Approach 2: First select all elements of class = ‘child’ by jQuery selector. There is an array which contains the indexes of the elements to be selected. We are traversing the array and using slice() method to select the particular element of that index. The background color of the elements has been changed to see the effect.
- Example:
<!DOCTYPE HTML>
<html>
<head>
<title>
How to select a range of elements in JQuery
</title>
<script src=
</script>
<style>
h1 {
color: green;
}
.geeks {
color: green;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<center>
<h1>
GeeksforGeeks
</h1>
<b>
Click on button to select a range
of elements
</b>
<div class="outer">
<div class="child">
Child 1</div>
<div class="child">
Child 2</div>
<div class="child">
Child 3</div>
<div class="child">
Child 4</div>
</div>
<br>
<button onClick="gfg()">
click here
</button>
<p id="geeks">
</p>
</center>
<script>
var down = document.getElementById('geeks');
// Defining childs
var arr = [0, 2, 3];
function gfg() {
var $el = $(".outer .child");
for(var i=0; i<arr.length; i++) {
$el.slice(arr[i], arr[i]+1)
.css("color", "red");
}
down.innerHTML = "Range of elements selected";
}
</script>
</body>
</html>
|
-
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...