獲取元素的索引中的元素

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()功能「計數」元素只能在特定父（而不是整個頁面）