javascript - jQuery - 索引返回 0 或 -1

Question

我在使用 jQuery .index() 函数时遇到了麻烦。所以我想做的是，当我单击 span(.edit) 时，我想提醒输入字段的索引(上面一个)。我正在测试一些东西，index() 总是返回 0 或 -1。

<div id="wrapper">
    <input class="editInput" type="text" />
    <span>Mr. Foo</span>
    <div>
        <span class="edit">Full name</span>
    </div>

    <input class="editInput" type="text" />
    <span>Foo Town</span>
    <div>
        <span class="edit">City</span>
    </div>
</div>

jQuery 语句

$(".edit").click(function(){
    alert($(this).parent().siblings(".editInput").index());
}

我尝试了很多类似的方法，但没有一个起作用。

有什么想法吗？

Answer 1

$(this).parent().siblings(".editInput") 在这种情况下将选择所有 .editInput 元素，并调用 .index () 不带参数将获取第一个选定元素(第一个 .editInput 元素)相对于其兄弟元素的位置，此处始终为 0 .

<小时/>

如果您想获取输入元素相对于其他输入元素的索引，则必须先选择所有输入元素:

var $inputs = $('#wrapper .editInput');

然后，您必须从单击的 span 中找到最接近的前面的 input 元素，您可以使用 .prevAll ^[docs] 来完成此操作和 .first ^[docs] :

var $closest_input = $(this).parent().prevAll('.editInput').first();

然后调用.index ^[docs]在 input 元素集上，传递刚刚找到的 input:

var index = $inputs.index($closest_input);

以这种方式调用时，.index 将返回所选元素集中传递的元素的索引。