jquery tab - get all tab IDs

Posted on 2012-09-13
Last Modified: 2012-09-14
I'm using the jQuery tab widget found here:

All I'm looking to do is to iterate through all tabs, and retrieve the ID of each tab.  

This "id" value is the same id property that you'd get if you were inside the SELECT event handler and asked for on the ui parameter.

o  I am NOT trying to retrieve this value inside an event.
o  I am NOT trying to retrieve this value for only the currently-selected tab.

I want to loop through all tabs and get this value for each tab, by index.  So, get the tab id for sub 0, sub 1, sub 2...

Question by:bamapie
    LVL 8

    Expert Comment

    Can you post a bit of your code?  The JQuery UI example doesn't use ID's.  But you also say you want the index...but then the I am confused by what you need.  Explaining code issues in forums is always tough :)

    I would think something similar to this is what you are looking for:
    $('.ui-tabs-nav li').each(function(index){
        alert('I am index: ' + index + ' and my html value is: ' + $(this).html());

    Open in new window

    But the above code is based on the JQuery UI example...

    Author Comment

    >But you also say you want the index...but then the ID...
    >so I am confused by what you need

    I think the only time I use the term "index" is when I say that I want to get the id "by index".  Meaning, by tab offset.  By zero-based index into the set of tabs.
    LVL 8

    Accepted Solution

    Right on.

    So then try this:
    $('.ui-tabs-nav li').each(function(index){
        alert('I am index: ' + index + ' and my id is: ' + $(this).attr('id'));

    Open in new window


    Author Closing Comment

    Fantastic.  Thanks.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Javascript: Crash Course

    Javascript is not only emerging as the most important language to know, it's flexibility is unique. With Javascript being deployed on the web, mobile and even the desktop this is the one language that all technologists need to know.

    In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now