javascript - 获取与所有此类元素相比被点击的元素的索引

Question

我有以下 HTML 结构:

<div id="people-container">
  <div class="col-md-4">
    <div class="col-xs-4 people">
    </div>
    <div class="col-xs-4 people">
    </div>
    <div class="col-xs-4 people">
    </div>
  </div>
  <div class="col-md-4">
    <div class="col-xs-4 people">
    </div>
    <div class="col-xs-4 people">
    </div>
    <div class="col-xs-4 people">
    </div>
  </div>
  <div class="col-md-4">
    <div class="col-xs-4 people">
    </div>
    <div class="col-xs-4 people">
    </div>
    <div class="col-xs-4 people">
    </div>
  </div>
  </div>

如您所见，我有 9 个人 div。我希望能够通过单击它们中的每一个来判断单击了 9 个中的哪一个。

我可以得到他们的索引，但它会返回一个值 {0, 1, 2}，我也可以得到他们的父索引，但范围相同，{0, 1, 2}。我考虑过将 parents 索引与它自己的索引相乘，但这当然行不通，最大值为 4，大多数值为 0...

我也不想做 9 if 条件。有没有更好的方法？

Answer 1

要实现这一点，您可以使用 index() 传递一个选择器来将所需的元素组合在一起。试试这个:

$('.people').click(function() {
  console.log($(this).index('.people'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="people-container">
  <div class="col-md-4">
    <div class="col-xs-4 people">people</div>
    <div class="col-xs-4 people">people</div>
    <div class="col-xs-4 people">people</div>
  </div>
  <div class="col-md-4">
    <div class="col-xs-4 people">people</div>
    <div class="col-xs-4 people">people</div>
    <div class="col-xs-4 people">people</div>
  </div>
  <div class="col-md-4">
    <div class="col-xs-4 people">people</div>
    <div class="col-xs-4 people">people</div>
    <div class="col-xs-4 people">people</div>
  </div>
</div>