Skip to content
AtlanticBT Monogram Atlanticbt.com
Menu
aim
July 20, 2009

Getting the Current Index Position of an Element in jQuery

capabilities covered
Amazon Web Services

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

capabilities covered
Amazon Web Services

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project

Partner With Us

Ready for modern web technology and a sharp, user-friendly design? We want to give you exactly that. Contact us to get started.

Contact

Insights

Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

Are there differences in application architecture that are important for the cloud?
It is important to build applications and workloads specifically for the cloud. You will want to carefully consider what services the cloud provider of your choice has to offer and how your application leverages those services.
Learn More
Are there any drawbacks to cloud hosting?
Yes, there will always be some risks associated with any hosting option. You are relying on the resiliency and engineering of infrastructure that has scaled at an astounding rate.
Learn More
What’s the benefit of hosting in the cloud vs. traditional options?
Reasons not to host in the cloud are few and far between. If you don't host in the cloud, you will spend more in both CapEx and OpEx to manage your applications or websites in a traditional environment.
Learn More
How can I improve the performance of my application?
There are several primary reasons that applications perform poorly, and in some cases it’s a combination of several. 1) Data latency: If your application is making calls to a data source (whether it’s an API or a direct call) and there is latency at the data provider, your application performance will suffer.
Learn More
Should I move my application to the cloud?
The answer is ‘probably yes’. There aren’t many reasons for an application to be hosted elsewhere, aside from occasional compliance standards, or requirements to integrate with local services that would require large amounts of data to move from on-premise to cloud.
Learn More
Where should my application be hosted?
There are many different options for hosting, but most applications would do well with one of the cloud providers -- Amazon Web Services, Google Cloud Platform, Microsoft Azure.
Learn More