CODEWITHSUNDEEP
javascriptjqueryjquery-uidomtabs
HeavenCore
HeavenCore

Reputation: 7683

Looping through each tab in a JQueryUI Tab Control and building an array of objects

Take the following bog standard JQuery UI markup:

<div id="Tabs">
  <ul>
    <li><a href="#Home">Welcome</a></li>
    <li><a href="#About">About</a></li>
    <li><a href="#ContactUs">Contact us</a></li>
  </ul>
  <div id="Home">
    <p>Static Content bla bla bla</p>
  </div>
  <div id="About">
    <p>Loading...</p>
  </div>
  <div id="ContactUs">
    <p>Loading...</p>
  </div>
</div>

Currently we build an array of objects to represent each tab - this allows us to easily add additional properties to each tab relevant to our own application. For Example:

var Tabs = [];

$(function () {
    //#### Ready tabs and add event handles
    $("#Tabs").tabs();

    AddTab(0, "Home", "Welcome");
    AddTab(1, "About", "About");
    AddTab(2, "ContactUs", "Contact us");
});

function AddTab(Index, ID, Caption) {
    var Tab = {
        "Index": 0,
        "ID": ID,
        "Caption": Caption,
        "Version": 1,
        "Loaded": false
    };
    Tabs.push(Tab);
}

This is clumsy and requires me to retype stuff in js that could no doubt be gathered automatically by looping through the JQuery tab object / DOM.

So, I tried the following:

$('#Tabs .ui-tabs-nav a').each(function () {
    AddTab(0, $(this).html(), $(this).attr('href'))
});

This works great for getting the tabs Caption & ID - however, I don't see how I can get the tabs zero-based index - How can I get the tabs zero based index in my each() loop above?

Upvotes: 1

Views: 3482

Answers (2)

charlietfl
charlietfl

Reputation: 171679

$.each will give you the index as first argument of callback

$('#Tabs .ui-tabs-nav a').each(function (index, element) {
    AddTab(index, $(this).html(), $(this).attr('href'))
    /*or  using element argument*/
     AddTab(index, $(element).html(), element.href)
});

See .each() docs

Upvotes: 2

Anton
Anton

Reputation: 32581

Try using .index(). Use .parent() to get the <li> element and use .index() to get index of that element

 AddTab($(this).parent().index(), $(this).html(), $(this).attr('href'))

Upvotes: 1

Related Questions