循环遍历JQueryUI选项卡控件中的每个选项卡并构建一个对象数组

Question

采用以下bog标准JQuery UI标记：

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

目前，我们构建了一个对象数组来表示每个选项卡 - 这使我们可以轻松地向与我们自己的应用程序相关的每个选项卡添加其他属性。 例如：

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);
}

这很笨拙，需要我在js中重新输入内容，这些内容无疑可以通过循环遍历JQuery选项卡对象/ DOM自动收集。

所以，我尝试了以下内容：

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

这对于获取标题Caption＆ID非常有用 - 但是，我没有看到如何获得标签从零开始的索引 - 如何在上面的each（）循环中获得基于零的索引？

Answer 1

$.each将为您提供索引作为回调的第一个参数

$('#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)
});

请参阅.each（）文档

Answer 2

尝试使用.index（）。 使用.parent（）获取<li>元素并使用.index（）获取该元素的索引

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