点击按钮

Question

使用JQuery我想在我点击此列表中的li中的button时获取当前tabpanel的索引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的索引，我就可以对其进行加减，得到{{1}我想要。

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

谢谢大家，每个人的回答都变成了这个：

index

Answer 1

试试这个：

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

Answer 2

您可以使用.index来获取元素或列表中所需元素的索引。它将返回位置或-1（如果它找不到元素/值）。

您可以像这样使用它：

$(document).ready(function(){
    $(":button").click(function(e){
      e.preventDefault();
      var index = $('#mytabs li').index($(this));

      if(index > -1){
          $('#mytabs li:eq('+ index +') a').tab('show');
      }
  });
});

如果你想使用"this"，我可以告诉你如何：

$(document).ready(function(){
    $(":button").click(function(e){
      e.preventDefault();
      var element = $(this);
  });
});

如果要为元素添加类，可以使用element.addClass("yourClass")来获取它。

我希望这对你有所帮助。

PD：我建议您将jQuery选择器从:button更改为#mytabs li，这样您就可以获得已点击的确切元素，或者您可以使用element.closest("li")获取父级李。

Answer 3

这应该有效：

   $(function() {
      $("li").click(function() {
         var li = $(this);

          console.log( li.parent().find("li").index(li));
      });
   });

返回您单击的li的索引。