通过单击按钮获取 li 的索引答案

【问题标题】：Get index of li with button click通过单击按钮获取 li 的索引
【发布时间】：2017-03-10 11:28:15
【问题描述】：

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

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

【问题讨论】：

使用 this.parent()
请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。（请添加完整的 HTML 代码。）
射击，不。说它未定义
也许你的语法错误？像这样尝试 $(this).parent()
令人困惑的问题..请详细说明

标签： javascript jquery twitter-bootstrap

【解决方案1】：

试试这个：

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

【讨论】：

“window”没有父元素。
谁说的window？他正在单击一个嵌套在 li 内的按钮。这是按钮。父母是李
在这个范围内，this 指的是window 对象。
怎么样？被点击的元素是按钮。
我的错误.. 我没有注意到点击处理程序。不过，这是错误的。该按钮不位于选项卡本身内，因此$(this) 仍然无关紧要。

【解决方案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")来获取它。

希望对你有所帮助。

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

【讨论】：

jQuery 元素组没有indexOf 方法，因为它不是数组或字符串。
是的，不是，是我的错，应该是.index() 或.find()

【解决方案3】：

这应该可行：

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

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

返回您单击的li 的索引。

【讨论】：