Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Select range of HTML elements using Jquery slice function
Posted By Sarin on Feb 20, 2013     RSS Feeds     Latest Hinduism news
4263 Views

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.
  

Note: Images used on this website are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon Foundation or were found in google search under "Free to use and share". If any of the images presented here violates copyright issues or infringes anyone copyright or are not under "Fair use", then please bring it to our notice. Read Disclaimer for more.

Share this to your friends. One of your friend is waiting for your share.
Related Articles
Generation and use of electricity in vedic era
Demo of Jquery functions and events for dropdownlist
Changing CSS Properties of HTML element using JQuery
Replacing and removing HTML Elements
Science in Hinduism-Theory of perception
Playing with HTML using Jquery
Call JavaScript functions from silverlight
Select range of HTML elements using Jquery slice function
Select Parent, Child, sibling,descendants HTML element using jquery
Commonly used string Functions

Post Comment