jQuery - 通過它在兄弟姐妹中的位置（索引）識別對象

Question

我想要做的是通過它在div中的位置來標識元素。我已經嘗試了下面的代碼，它的工作原理，但我很好奇，如果有更有效的方法來做到這一點。

HTML：

<div class="container"> 
    <button>One</button> 
    <button>Two</button> 
    <button>Three</button> 
</div> 

<div class="result"></div> 

的JavaScript：

$('.container button').on('click', function(e) { 
    clickedBtn = e.target; 
    btnNum = 0; 

    $('.container button').each(function(i) { 
    if ($(this)[0] === clickedBtn) 
     btnNum = i+1; 
    }); 

    $('.result').text('Clicked button #' + btnNum); 
}); 

Answer 1

既然你正在尋找基於在兄弟姐妹的索引可以撥打.index()不帶任何參數。

$('.container button').on('click', function(e) { 
 
    $('.result').text('Clicked button #' + $(this).index()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <button>One</button> 
 
    <button>Two</button> 
 
    <button>Three</button> 
 
</div> 
 

 
<div class="result"></div>