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>