Question

我已经看到了使用以下代码获取元素索引的方法：

$('.element').mouseup(function() {
  var index = $(this).index();
});

但是由于我的元素动态生成的方式，我必须附加我的事件处理程序：

$(document).on("mouseup", ".element", function(){
    //Do things 
});

由于$(this)只会返回文档，如何找到触发事件的元素的索引？

Answer 1

一种方法是抓住父母，通过以下方式选择孩子：

let index = $(this).parent().children();

然后，使用它来获取索引：

index.index(this);

所以要将它们包装在一起，虽然我不知道为什么索引在这里是相关的..

$(document).on("mouseup", ".element", function(){
    let index = $(this).parent().children();
    index = index.index(this);
});

这是适合您的可运行版本

一种方法是抓住父母，通过以下方式选择孩子：

let index = $(this).parent().children();

然后，使用它来获取索引：

index.index(this);

所以要将它们包装在一起，虽然我不知道为什么索引在这里是相关的..

$(document).on("mouseup", ".element", function(){
    let index = $(this).parent().children();
    index = index.index(this);
    console.log(index)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="element">test 0</div>
<div class="element">test 1</div>
<div class="element">test 2</div>
<div class="element">test 3</div>
<div class="element">test 4</div>
<div class="element">test 5</div>

Answer 2

我实际上误认为{`1}在``$（document）.on（＆＃34; mouseup＆＃34;，＆＃34; .element＆＃34;，函数）范围内调用（）{...}）;确实会返回触发此事件的元素。

这意味着我的问题毫无意义，但如果其他人有同样的错误问题，我会将其留作历史用途。

Answer 3

<<<

对于这样的html，您需要做的就是在回调中包含事件对象。如上所示，它在控制台窗口上打印索引。

jQuery使用$ .on事件处理程序获取被点击元素的索引

3 个答案: