获取所选 DOM 元素的索引，返回 -1

Get index of selected DOM element return -1?

本文关键字：索引 返回 元素 DOM 获取      更新时间：2023-09-26

我为点击事件绑定album_item，我想获取盒子的索引。但我得到了-1。

.HTML 

<div id="album_item">
    <div class="box box_album_item">
        <div class="album_item">a</div>
    </div>
    <div class="box box_album_item">
        <div class="album_item">b</div>
    </div>
    <div class="box box_album_item">
        <div class="album_item">c</div>
    </div>

爪哇语

    $(function () {
        $(document).on('click', '.album_item', function () {
            alert($(this).find('.box_album_item').index());
        });
    });

您正在尝试选择不存在的元素：

find()函数搜索给定元素的子元素，在本例中为 .album_item 。所以，.album_item下来没有任何子元素，这就是为什么它的索引是-1

相反，您必须使用 closest() 函数才能向上搜索 DOM 树：

$(document).on('click', '.album_item', function () {
        alert($(this).closest('.box_album_item').index());
    });
它

应该是：

alert($(this).closest('.box_album_item').index());
  1. .find()进入元素内部到子元素。
  2. .closest()向上穿越到父母。

所以在你的情况下，.box_album_item是父级，所以应该使用.closest()。

alert($(this).closest('.box_album_item').index());

http://jsfiddle.net/f3okr0ba/1/

$(document).on('click', '#album_item', function () {

使用 ID 代替类

相关文章：