Tips for Optimizing jQuery Reply

misc3_bgI have used jQuery in the past and know how easy it makes certain tasks.  In a recent project, I once again had the opportunity to make use of jQuery.  This time however, I wanted to take some time and make sure that my jQuery code was being used as optimally as possible.  In this post, I will point out a few of the tricks that I learned to keep jQuery performance at its best.

  1. Limiting Selections
  2. Using the filter method
  3. Saving $(this) as a variable

For this project, I was working with a set of data which was stored in a structure of <div> tags like the example below.

<div class="PrimaryGroups">
 <div class="PrimaryGroup">
 <div class="ID">100</div>
 <div class="Title">First Primary Group</div>
 <div class="Order">1</div>
 <div class="SecondaryGroups">
 <div class="SecondaryGroup">
 <div class="ID">25</div>
 <div class="Title">A Secondary Group</div>
 <div class="Order">1</div>
 <div class="Type">Leaf</div>
 </div>
 . . .
 </div>
 </div>
 . . .
 </div>

Limiting Selections

The first thing that I found myself doing was looping through each of the items and doing some processing based on their values.

$(".PrimaryGroups").each(function () { } );

One thing that I found was that for my case it is better to preceed the class name with the div element. This tells jQuery to only parse div tags and return only those which have the class attribute equal to the value PrimaryGroups.

$("div.PrimaryGroups").each(function () { } );

Using the filter method

I found myself using the .each() method as a for loop to further limit my query selection.  The following function first gets all <div> tags that have a class attribute of PrimaryGroup and are child nodes of a <div> tag with class attribute of Primary Groups.  Then it finds all <div> tags that have a class attribute of ID, then it sets the innerText of all sibling <div> tags which have a class attribute of Title.

function ChangeTitle(id, newTitle)
 {
 $("div.PrimaryGroups div.PrimaryGroup").each(function ()
 {
 if ($(".ID", this).text() == id
 $(".ID", this).siblings("Title").text(newTitle);
 } );
 }

The .filter() method is a much better approach for performing this sort of selection filtering.  As its name implies, the .filter() method provides an easy way to further filter a selection.  In my example, the .filter() method is passed a function which returns true if the node contains a child <div> tag with a class attribute of ID.  It then assigns any children <div> tags with a class attribute of Title to have the innerText property set to the new value.

function ChangeTitle(id, newTitle)
 {
 $("div.PrimaryGroups div.PrimaryGroup")
 .filter(function () { return $("div.ID", this).text() == id; })
 .children("div.Title").text(newTitle);
 }

Saving $(this) as a variable

Inside the .each() method, this refers to an html DOM object.  To convert the this html DOM object to a jQuery select, you simple wrap it in $().

$('div.pv_step', $(this)).each(function ())
 {
 var stepOrder = $('div.pv_stepOrder', $(this)).text();
 var stepOrderId = $('div.pv_stepOrderId', $(this)).text();
 var stepId = $('div.pv_stepId', $(this)).text();
 var link = $('div.pv_stepLink', $(this)).text();
 var type = $('div.pv_stepType', $(this)).text();
 var desc = $('div.pv_stepDescription', $(this)).text();
 var stepTitle = $('div.pv_stepTitle', $(this));
 }

Since JavaScript code is executed everytime an html DOM object is converted to a jQuery selection, it more efficient to save the jQuery selection as a variable when accessing it multiple times.  The following code example shows the previous code rewritten to use a variable to keep the reference to the jQuery object.

$('div.pv_step', $(this)).each(function ())
 {
 var $this = $(this);
 var stepOrder = $('div.pv_stepOrder', $this).text();
 var stepOrderId = $('div.pv_stepOrderId', $this).text();
 var stepId = $('div.pv_stepId', $this).text();
 var link = $('div.pv_stepLink', $this).text();
 var type = $('div.pv_stepType', $this).text();
 var desc = $('div.pv_stepDescription', $this).text();
 var stepTitle = $('div.pv_stepTitle', $this);
 }

Note: In the jQuery world, it is comman practice to name the jQuery variable equivalent of JavaScript’s built-in this variable as $this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s