获取元素列表中元素的索引

Question

我有以下HTML：

<ul class="nav">
  <li><button></button></li>
  <li><button></button></li>
</ul>

在以下代码“ this”中，列出了“ nav”类：

  $.fn.slider = function () {

    $(this).each(function () {

      var $this = $(this);

      var $pages = $this.find("button");

      $pages.on("click", function (element) {             
        console.log($(element).index($pages));
      }); 

我得到的输出是：console.log -1

基本上我正在尝试获取列表中按钮的索引...

为什么会这样？

Answer 1

使用index()方法并将this作为参数传递给单击的按钮以获取值：

 $(document).on("click", "ul > li > button", function() { console.log($("ul > li > button").index(this)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav"> <li><button>Button 1</button></li> <li><button>Button 2</button></li> </ul> 

Answer 2

获取按钮index的方法是获取<li>的索引，因为每个li都有一个button 。 像这样：

 $('ul.nav li').click(function(){ console.log($(this).index()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul class="nav"> <li><button>1</button></li> <li><button>2</button></li> <li><button>3</button></li> </ul> 

index()函数仅在特定父级中“计数”元素（不在整个页面上）