jQuery - 通过兄弟姐妹中的位置(索引)识别对象

时间:2014-11-05 07:32:20

标签: javascript jquery

我想要做的是通过div中的位置来识别元素。我已经尝试了下面的代码并且它有效,但我很好奇是否有更有效的方法来实现这一点。

HTML:

<div class="container">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>

<div class="result"></div>

JavaScript的:

$('.container button').on('click', function(e) {
  clickedBtn = e.target;
  btnNum = 0;

  $('.container button').each(function(i) {
    if ($(this)[0] === clickedBtn)
      btnNum = i+1;
  });

  $('.result').text('Clicked button #' + btnNum);
});

1 个答案:

答案 0 :(得分:3)

由于您正在寻找基于兄弟姐妹的索引,您可以在没有任何参数的情况下调用.index()

&#13;
&#13;
$('.container button').on('click', function(e) {
  $('.result').text('Clicked button #' + $(this).index());
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>

<div class="result"></div>
&#13;
&#13;
&#13;