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).
