javascript - 单击按钮获取 li 的索引

Question

使用 JQuery 我想获取当前 li 的索引，当我单击 tabpanel 中的 button 时> 位于这个 BootStrap 选项卡列表中。

<ul id="mytabs" class="nav nav-pills nav-wizard pill-font" 
  role="tablist" data-tabs="tabs">
  <li role="presentation" class="active"><a href="#start" 
    data-toggle="tab">Before We Start</a></li>
  <li role="presentation"><a href="#setup" aria-controls="setup" 
    role="tab">Setup</a></li>      
  <li role="presentation"><a href="#signup" aria-controls="Signing Up" 
    role="tab">Signing Up</a></li>      
  <li role="presentation"><a href="#speed" role="tab">Shipping Speeds</a</li>
  <li role="presentation"><a href="#fulfill" role="tab">Fulfillment</a></li>
  <li role="presentation"><a href="#product" 
    role="tab">Products</a></li>          
</ul>

我将在每个 tabpanel 的按钮中使用一个计数器，这样我就可以前进和后退。这是我没有计数器的 JQuery..

$(document).ready(function(){
  $(":button").click(function(e){
  e.preventDefault();
  $('#mytabs li:eq(2) a').tab('show');
  });
});

现在它只有索引 2 但如果我能找到当前 li 的索引，我将能够对其进行加减以获得li 我要。

我尝试使用 this 但它只返回按钮的 index，这不是我想要的。

---

谢谢大家，大家的回答大杂烩变成了这样:

$(document).ready(function(){
  $(":button").click(function(e){
    e.preventDefault();
    var index = $(this).parent().index();
    var length = $('#mytabs li a').length
    alert(length);
    index=index+1;
    $('#mytabs li:eq('+index+') a').tab('show');
  });
});

Answer 1

试试这个:

$(document).ready(function(){
    $(":button").click(function(e){
        e.preventDefault();
        var index = $(this).parent().index();
        $('#mytabs li:eq(index) a').tab('show');
    });
});