Question

我确信这很简单，但我无法在所选元素列表中获取项目索引。

<!DOCTYPE HTML>
<html lang="en-GB">
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $items = $('div.inner');
                console.log($items);
                $items.each(function(){
                    console.log($(this).index())
                })
            });
        </script>
    </head>

    <body>
        <div class="inner" id="div1"></div>
        <div class="outer"></div>

        <div class="inner" id="div2"></div>
        <div class="outer"></div>

        <div class="inner" id="div3"></div>
        <div class="outer"></div>
    </body>
</html>

从第一个控制台输出中可以看出，我创建了一个名为$ items的变量，它只有三个对象。我需要获取此集合中每个对象的索引。即，索引0,1和2.但是，当循环遍历集合时，返回索引0,2和4。如果我添加更多具有外部类的div，则索引会再次更改。

这里发生了什么，以及如何获取$ items集合中的索引

Answer 1

.index()方法返回元素相对于其兄弟元素的索引，但您要查找的是列表中元素的索引。

.each()，将集合中的当前元素索引作为第一个参数，可以使用它

$(document).ready(function () {
    $items = $('div.inner');
    console.log($items);
    $items.each(function (idx) {
        console.log(idx)
    })
});

演示：Fiddle

Answer 2

我非常肯定

$(function () {
    $items = $('div.inner');
    $items.each(function (index) {
        console.log(index)
    })
});

无法获取所选对象的索引

2 个答案: