JQUERY SELECTOR FIRST X ITEMS OF SPECIFIC CLASS

• POSTED BY SAM DEERING
 
• IN JQUERY CODE SNIPPETS

I’ve been playing around with this a little. Grabbing a specific number of DOM elements based on a specified class.

First, basics to get the first and last elements like so:

Plain Copy

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

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

Plain Copy

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

or the nth/xth element like so:

Plain Copy

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:

Plain Copy

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 an attempt to use the jQuery .get() function to include a range of elements.

Plain Copy

(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 <= end; i++ )
    {
      elems.push(this.get(i));
    }
    return elems;
  };

  //testing
  console.log($('div').getRange(1,10));
  console.log($('div').getRange(10,20));

})(jQuery);

Does anyone know of a better way to achieve this?

AUTHOR: Sam Deering. Find out more about jQuery4u author on Google Plus.