Skip to main content

jQuery Speed Test: $(this) vs .get() vs .eq()

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

Each loop cache performance – test to see if grabbing the current element from inside the each is possible/faster from a cached array of elements. Namely $(this) vs .get() vs .eq() with .text() and textContent/innerText. Tests run with jQuery 1.9.1. Similar to: jQuery Speed Test: $(this).attr(“id”); vs this.id .

dom-cache-loop-111

  • .get() and .eq() both return a single “element” from a jQuery object array, but they return the single element in different forms.
  • .eq() returns it as a jQuery object, meaning the DOM element is wrapped in the jQuery wrapper, which means that it accepts jQuery functions.
  • .get() return a raw DOM element. You may manipulate it by accessing its attributes and invoking its functions as you would on a raw DOM element. But it loses its identity as a jQuery-wrapped object, so a jQuery function like .fadeIn won’t work.

Setup




   
       list
       
         
             nested 1
             nested 2
             nested 3
         
       
       list
         
             nested 1
             nested 2
             nested 3
         
       list
         
             nested 1
             nested 2
             nested 3
         
       list
   
   


  Benchmark.prototype.setup = function() {
    MY_OBJECT = 
        {
            cache: {},
        
            init: function()
            {
                this.cache.c = $('#container');
                this.cache.n = this.cache.c.find('.nested');
    this.cache.s = this.cache.c.find('#status');
            }
        }
    MY_OBJECT.init();
  };

Tests

$.each(MY_OBJECT.cache.n, function(i, v) 
{
    MY_OBJECT.cache.s.text($(this).text());
});


$.each(MY_OBJECT.cache.n, function(i, v) 
{
    MY_OBJECT.cache.s.text(MY_OBJECT.cache.n.eq(i).text());
});


$.each(MY_OBJECT.cache.n, function(i, v) 
{
    MY_OBJECT.cache.s.text(MY_OBJECT.cache.n.get(i).textContent);
});

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn how Git works, and how to use it to streamline your workflow!


Google, Netflix and ILM are Python users. Maybe you should too?