JavaScript
Article
By Sam Deering

jQuery select first x items of specific class

By Sam Deering

I have written a little jQuery function call .getRange() which returns a specific number of DOM elements against a jQuery selector (ie elements based on a specified class or id). It uses the jQuery.get() function and is basically an extension of that but allows for a range of elements to be returned.

Firstly, you should know to get the first and last elements like so:

var firstSpan = $('span.class:first'),
    lastSpan = $('span.class:last');

To get all the elements that match a specified class like so:

--ADVERTISEMENT--

var allSpans = $('span.class').get();

or the nth element like so:

var firstSpan = $('span.class').get(0),
    secondSpan = $('span.class').get(1);
    //etc...

But how to get say the first 10 elements or elements 10-20?

It would be nice to go something like:

var mySpans = $('span.class').get(0,10);

Unfortunately, the .get() function doesn’t allow for a range to be passed, but just a single index.

So here is my attempt to use the jQuery .get() function to include a range of elements.

(function($)
{
//function that gets a range of dom elements against a jQuery selector
//returns an array of dom elements
$.fn.getRange = function(start,end)
{
var elems = [];
for ( var i = start; i

It works this way, but i’m thinking it’s not an optimal solution so does anyone know of a better way to achieve this?

Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account