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

希望这对您有所帮助。在这里，我从 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>

Answer 2

您只需要使用 jQuery 函数 index()。如果 HTML 结构正确，这将 return 元素的位置。我刚刚为您创建了一个 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());
});

获取 'this' 选择器索引

Get 'this' selector index

javascript

jquery

jquery-selectors