获取元素的索引中的元素

Question

的名单，我有以下HTML：

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

在下面的代码“这种”冷藏列出与类“导航”：

$.fn.slider = function() { 

    $(this).each(function() { 

     var $this = $(this); 

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

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

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

基本上我试图让在列表中按钮的索引...

为什么有时候是这样的？

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()功能“计数”元素只能在特定父（而不是整个页面）