获取'this'选择器索引

Question

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

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

当我单击<div id="id1">click</div> 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>

jQuery的：

$('#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>

如果你在div中添加一个更具体和有意义的attr索引，而不是'id'，因为我们不能依赖'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>