Jquery - 在頁面內查找選擇列表的索引

Question

我想在選擇列表的值改變時使用類sel來獲取選擇列表的索引。頁面中有很多。

<p> 
    <select class="sel"> 
     <option>a</option> 
     <option>b</option> 
     <option>c</option> 
     <option>d</option> 
    </select> 
    => return 0 when changed 
</p> 
<p> 
    <select class="sel"> 
     <option>a</option> 
     <option>b</option> 
     <option>c</option> 
     <option>d</option> 
    </select> 
     => return 1 when changed 
</p> 
<p> 
    <select class="sel"> 
     <option>a</option> 
     <option>b</option> 
     <option>c</option> 
     <option>d</option> 
    </select> 
     => return 2 when changed 
</p> 
<p> 
    <select class="sel"> 
     <option>a</option> 
     <option>b</option> 
     <option>c</option> 
     <option>d</option> 
    </select> 
     => return 3 when changed 
</p> 

<p id="result"></p> 


$(function() 
{ 
    $('.sel').change(function() 
    { 
     console.log($(this).index()) //always returns 0 
    }); 
}); 

Answer 1

這是因爲選擇的元素是p元素的第一個孩子，如果你想在一個select.sel集合改變的元素的索引，你應該元素傳遞給index方法：

$(function() 
{ 
    var $sels = $('.sel').change(function() 
    { 
     console.log($sels.index(this));  
    }); 
});