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＆＃39; id＆＃39;。

获取索引

＆＃13;

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

＆＃13;

<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>

＆＃13;

而不是＆＃39; id＆＃39;如果你在div中添加一个更具体和有意义的attr索引，因为我们不能依赖于＆＃39; id＆＃39;。这样的事情

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您只需要使用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());
});

获取'this'选择器索引

2 个答案: