I’ve been using jQuery for years. I find myself getting tied up in trying to solve a problem the jQuery way. Many times however we need to forget jQuery, and go back to good ole javascript. For example, jQuery’s strength is easily helping you work with the DOM. But, often times you can just as easily skip the overhead of jQuery and solve the issue in just as few of lines with javascript. I’m not saying not to use jQuery, just when and where you really need it. Lets look at an example:

First Example

Lets say we have a table, and we want to loop through each row and sequentially number the cell. First here is the jQuery:

function numberColumnJq($table, i){
	var $col = $table.find('tr > td:nth-child('+ (i+1) +')');


numberColumnJq($('#Table1'), 2);

Not too difficult, we use a selector to grab all nth index td (not th, we’ll assume those are in the header row). Loop through the selection and update the text in the cell. Ok, What is so difficult about this we can’t swap out for plain javascript?

function numberColumnJs($table, i){
	var $col = $table.find('tr > td:nth-child('+ (i+1) +')');

	for(var j=0,l=$col.length; j<l; j++)
		$col[j].innerHTML = j;

numberColumnJs($('#Table1'), 2);

Yes, I’m deliberately picking on .each() here. We still use the selector, because hey that’s much easier, but simply looping through the results is a piece of cake. With jQuery you can access the core dom element with array notation, which is awesome!

So What?

So big deal, I can easily swap out .each() but for what reason, maybe a very slight performance gain? Well I showed that example to move into the next example. Suppose you need to loop through in reverse. Here is why. Suppose on that same table as above we needed to remove certain columns. If we loop by incrementing out indexes will change once columns are removed. If I remove column 3, then every column after 3’s index suddenly decrements by 1. However if we loop backwards we avoid this problem.

I won’t bother with showing you this in .each() because it can’t (that I’m aware of?). But, as I showed you above a plain javascript loop can be done in nearly the same amount of effort. And as a bonus, we can still use our jQuery selector, and then access the dom nodes easily:

var $table = $('#Table1'),
	display = { // show or hide each column?
		"col0": false, 
		"col1": true, 
		"col2": false, 
		"col3": true, 
		"col4": true, 
		"col5": false 
	cells = $table.find('tr:eq(0) th');

function removeColumnJs($table, i){
	var $col = $table.find('tr > *:nth-child('+ (i+1) +')');

	for(var j=0,l=$col.length; j<l; j++)

for(var i=cells.length-1, l=0; i>=l; i--)

Make sense? our removeColumnJs() is nearly identical to the previous example, except we remove the cell. The good stuff is in the following loop where we start from length-1 and go down to 0, so we avoid changing the index for the next iteration.

Moral of the Story

Know when to lay down those jQuery guns. jQuery is no doubt awesome, but sometimes we forget about the basics, which can often times be similar code size, and avoid the overhead. Anyone have any other scenarios like this?