jQuery has quickly become one of the defacto JavaScript libraries for web developers. Its popularity has increased for many reasons including its ease of use, its built-in methods that aid in basic tasks, and its multitude of plug-ins that can be found to enhance its capabilities.
However, when I was writing a function the other day, I came across a minor stumbling block in jQuery. I was trying to create universal “continue” buttons throughout some user-interface tabs and I realized I needed a specific method that isn’t part of the jQuery library; some way to determine the current index of the element I was on.
Having been to jQuery Docs several times, I didn’t recall ever seeing what I needed, but I was hoping I’d be lucky. Unfortunately, after a visit to the documentation, I found that I was right. There was no such method. Of course, the eq() method does exist, but that’s the direct opposite of what I was looking for—to move to a specific index position of the matched elements. Moreover, in using the eq() method you’d need to know which index you’d like to select!
The eq() selection concept is much like the built-in “select” parameter that you can pass through the UI Tabs method I was hoping to use. For instance:
$tabs.tabs(‘select’, 1);
This will select the first tab in the set. So, if I had a continue button at the bottom of each tab panel how would I know how to select the very next tab? I could, of course, make a special case for every instance of a panel’s continue button, but that poses a problem with extensibility. What if we added more tabs? Plus, it’s just ugly code. The fault here is that you’d have to know what each tab is named and how they relate to one another—creating a problem if the tabs were ever re-organized.
Instead I’d need something a little more universal. I’d need a single function that would encompass all of the continue buttons and switch to the next tab based on its current index. But, as I discovered in the documentation, you can’t locate the current index with a simple method like eq().
With all of my struggles aside, the good news is that the round-about way of getting the current index position is really not all that difficult. After a few minutes of thought and some idea bouncing (off of the smarter programmers here in the office) we came to the conclusion that I could simply count how many elements there are before the tab I’m on using the prevAll() and length methods built-in to jQuery. Thus, if there were 2 previous elements, I must be at the third item. The selection looks something like:
var $tabs = $(‘#tabs-area ul.ui-tabs-nav’).tabs({ fx: { opacity: ‘toggle’ } }); $(‘#tabs-area a.tab-link’).click(function () { currentIndex = $(this).parent().prevAll().length; alert(currentIndex); return false; });
Here I’m selecting the anchor elements with classes of “tab-link” which is what I called each “continue” button. When they’re clicked, I store the number of “ui-tabs-panels” before the current tab. Please note, that the parent() method is being used to traverse backwards to these “ui-tabs-panels.” You’re path may vary depending on your HTML markup.
Using “currentIndex” I can check if it is larger than the length of the tabs array (meaning I’m not on the last tab yet) to prevent any possible tab selection errors by trying to move past the last tab. Then I can use currentIndex to select the next tab. This would make our little function look like this now:
var $tabs = $(‘#tabs-area ul.ui-tabs-nav’).tabs({ fx: { opacity: ‘toggle’ } }); $(‘#tabs-area a.tab-link’).click(function () { currentIndex = $(this).parent().prevAll().length; if (currentIndex < $tabs.tabs(‘length’)) { $tabs.tabs(‘select’, currentIndex); } return false; });
I also must mention that in this function I’m selecting currentIndex in the statement $tabs.tabs(‘select’, currentIndex);. This may be confusing since the way the array indices and the “select” parameter work are based on a zero beginning index. But, when length is calculated it starts with 1. So, there’s a bit of an “off-by-one-bug.” I can, of course, trim the length by 1 and adjust the if statement to be <=, but that would be equally confusing. Either way, rest assured that the currentIndex in the “select” statement will select the very next tab.
In closing, it is quite easy to determine the current index position of an element in jQuery without using any built-in methods. All you need to do is count:
currentIndex = $(this).parent().prevAll().length;
This assignment is very easy to build upon (or adjust the index by subtracting 1—if you’re picky).
