jQuery - index() 函数返回错误的索引（CheckBox 和 Select）答案

【问题标题】：jQuery - index() function returns wrong index (CheckBox and Select)jQuery - index() 函数返回错误的索引（CheckBox 和 Select）
【发布时间】：2017-10-14 13:17:37
【问题描述】：

我创建了 CheckBox 元素列表和 Select 与前面提到的列表具有相同的值。我要做的是，如果我更改 CheckBox 选择，Select list 会自动将自身更新为与 CheckBox 相同的命名选项。我在纯 JavaScript 中创建了这个（并且它正在工作），如下所示：

function addChckBoxListener() {
    for (var i = 0; i < chckBox.length; i++) {
        (function(index) {
            chckBox[i].addEventListener("change", function() {
                update(0, index);
            });
        })(i);   
    }    
}

function addSelectListListener() {
    selectList.addEventListener("change", function() {
        update(1, this.selectedIndex); 
    });
}

后来，我想用 jQuery 库实现相同的功能，但它的 index() 函数返回错误的索引。我不知道为什么。这是相同的代码，但在 jQuery 中：

function addChckBoxListener() {
    chckBox.each(function() {
        $(this).change(function() {
            update(0, $(this).index());    
        });
    });   
}
function addSelectListListener() {
    selectList.change(function() {
        update(1, $(this).selectedIndex);  
    });
}

这是我的 HTML 代码：

<body>
    <div>
        <ul>
            <li><input type="checkbox" value="red">&nbsp;Czerwony</li>
            <li><input type="checkbox" value="blue" checked>&nbsp;Niebieski</li>
            <li><input type="checkbox" value="green">&nbsp;Zielony</li> 
        </ul>
        <select name="selectColors">
            <option value="red">Czerwony</option>
            <option value="blue" selected="selected">Niebieski</option>
            <option value="green">Zielony</option>
        </select>
    </div>
</body>

如果你想测试这段代码，这里是链接（JSFiddle）：https://jsfiddle.net/8yayr972/1/

【问题讨论】：

标签： javascript jquery html checkbox drop-down-menu

【解决方案1】：

似乎问题出在index的使用上。复选框始终是li内的第一个元素。所以无论它是什么，索引都将为0。li的索引似乎是有用。所以在这个函数里面，不是查询复选框的索引，而是查询它的父级索引li

function addChckBoxListener() {
  chckBox.each(function() {
    $(this).change(function() {
     update(0, $(this).parent().index()); // changed here
    });
  });
}

DEMO

【讨论】：

看起来 CheckBox 选择适用于 parent() 函数。您知道为什么选择列表更改侦听器中的 selectedIndex 不起作用吗？我读过有新的 prop("attr") 功能，但有必要使用它吗？感谢您的回答。