Introduction to JQUERY - Slicing Elements with the slice() method

Guest Posts Paolo Nikko Nuñal

Another interesting method that we are going to tackle is the slice() method. From the name itself, you already get a clear perception on how the slice() method work and that is to "slice". The slice() method acts pretty much the same as the substring method that has a start and end. Here's how the slice method works.

Syntax:

$(selector).slice([START],[STOP])

START - (REQUIRED) The start parameter specifies where to start the selection of the element you want to slice. The index number of the element starts at 0.

STOP - (OPTIONAL) The end parameter specifies where to end the selection of the element you want to slice. The index number of the element starts at 0.

Code


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    text = "The quick brown fox";
    new_text = text.slice(4);
    $("#results").append(new_text);

    text2 = "The quick brown fox";
    new_text2 = text.slice(4,11);
    $("#results2").append(new_text2);
});
</script>
</head>
<body>
Original Text: The quick brown fox
<div id="results">
Sliced text with starting:
</div>
<div id="results2">
Sliced text with start and end:
</div>
</body>
</html>


From the example above, we are able to slice the text depending on the index. The first example starts at index(4) in which, we have the text "The quick brown fox". The fourth index contains a "space" and that is why it started to slice there and returns the text "quick brown fox". The second one has an end which starts at index(4) which is a "space" and ends at index(11) which is the letter "r".

There you have it, you now know how to slice elements using the slice() method.