Select range of HTML elements using Jquery slice function
Many times, we need to perform an action on a range of JQuery elements. JQuery provide us with various traversing function like parent, next, siblings etc which allows you to select a range of elements. In this article, we will see how the use of slice functions to perform an action on a subset of elements.
Syntax of slice function is
Syntax:
selector.slice( start, end )
Where start and end are the two parameters
Parameters description
Start: Let you define the starting point of the selection. Negative mean to start from the end of the selection
End: specify the end of the subset excluding end element. If not specified, it selects all elements from the starting point of the selection
Demo:
In this demo, I have declared few paragraph elements and input buttons to demonstrate the use of slice function on this paragraph elements.
<p class="change">
This is Paragraph 1.</p> <p>
This is Paragraph 2.</p> <p class="change">
This is Paragraph 3.</p> <p>
This is Paragraph 4.</p> <p>
This is Paragraph 5.</p> <p class="change">
This is Paragraph 6.</p> <p>
This is Paragraph 7.</p> <p>
This is Paragraph 8.</p> <p class="change">
This is Paragraph 9.</p>
<input type="button" value="Change First Four Paragraph" onclick='FirstFour();' />
<input type="button" value="Change Sixth Seventh Paragraph" onclick='SixSeven();' />
<input type="button" value="Change Last Seventh Paragraph" onclick='Last();' />
<input type="button" value="Change Four even Paragraph" onclick='FourEven();' />
<input type="button" value="Change class Paragraph" onclick='Filter();' />
JQuery functions used to select range of paragraph elements using slice function are:
function FirstFour() {
var pList = $('p').slice(0, 4);
pList.html('This Paragraph content has changed');
}
function SixSeven() {
var pList = $('p').slice(5,7);
pList.html('This Paragraph content has changed');
}
function Last() {
var pList = $('p').slice(7);
pList.html('This Paragraph content has changed');
}
function FourEven() {
var pList = $('p:even').slice(0,4);
pList.html('This Paragraph content has changed');
}
function Filter() {
var pList = $('p:.change').slice(2);
pList.html('This Paragraph content has changed');
}
In above piece of code, I have selected different subsets of paragraph elements and then have changed the HTML content of these paragraph elements.
FirstFour function selects four paragraph elements starting from first and then change the HTML content of these four selected elements.
SixSeven() function selects sixth and seventh paragraph elements and changes its HTML content. .slice(5,7) means select paragraph elements from index 5(from sixth P element) till the paragraph element at index 7(Exclude 8th paragraph element)
Output of these two functions can be seen below:
Left is the result of first function and right is the result of second function.
Similarly, Last () function changes HTML content of all paragraph elements starting from index 7. FourEven() function changes HTML content of first four even paragraph element and finally Filter() function changes HTML content of all paragraph element having class name as ‘Change’.
Below is the output of third and fourth function
Conclusion
JQuery provide us with various functions to obtain subsets of a wrapped set, based on their relationship with other elements in the DOM. These functions give us various options to define our logic of selecting elements within DOM with ease and precision. In this article, we learnt one of such functions called slice. In succeeding articles, we will go through more such functions.
Download attached file for sample code. Enjoy coding.