How to Select a Range of Elements using jQuery ? - GeeksforGeeks

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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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>
<!DOCTYPE HTML><html>  <head>    <title>        How to select a range of elements in JQuery    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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>
<!DOCTYPE HTML><html>  <head>    <title>        How to select a range of elements in JQuery    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
jQuery-Misc
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)
Types of CSS (Cascading Style Sheet)