获取"this"选择器索引

Question

我有以下代码，我需要检测我点击的元素索引：

$('#id1, #id2, #id3').click(function(){ console.log( magicIndex(); ) });

当我单击div <div id="id1">click</div>时，我需要获取0作为输出，因为此选择器项目索引为 0。

当我点击<div id="id2">click</div>时，我必须得到1作为输出。

Answer 1

你只需要使用 jQuery 函数 index((。如果 HTML 结构正确，这将返回元素的位置。我刚刚为您创建了一个 jsfiddle：

https://jsfiddle.net/zLs4fo0f/6/

.HTML：

<div>
  <div id="id1">
    aaaaaa
  </div>
  <div id="id3">
    bbbbbb
  </div>
  <div id="id2">
    cccccc
  </div>
</div>
<div id="result" style="color: red;">
</div>

j查询：

$('#id1, #id2, #id3').on('click', function() {
    $('#result').text('Index: ' + $(this).index());
});

Answer 2

希望这有帮助。 在这里，我从div 'id' 获取索引。

function magicIndex(node){
  return node.attr('id').replace('id','')-1;
}
$('#id1, #id2, #id3').click(function(){ console.log( magicIndex($(this)) ); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1">Hi</div>
<div id="id2">Hello</div>
<div id="id3">Bye</div>

而不是'id'，

如果你在div中再添加一个attr索引，这将更加具体和有意义，因为我们不能依赖'id'。 像这样的东西

function magicIndex(node){
  return node.attr('index');
}
$('#id1, #id2, #id3').click(function(){ console.log( magicIndex($(this)) ); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" index='0'>Hi</div>
<div id="id2" index='1'>Hello</div>
<div id="id3" index='2'>Bye</div>