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

因为select元素是p元素的第一个子元素，如果要获取select.sel集合中已更改元素的索引，则应该将元素传递给index方法：

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