获取“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>