jQuery如何获取被点击元素的索引？

laik7k3q 于 2023-10-17 发布在 jQuery

关注(0)|答案(1)|浏览(123)

我试图让它，当我点击img时，我得到点击图像的索引。
例如，如果我点击第一个图像，我得到索引1，点击第二个图像，我得到索引2，点击第三个图像，我得到索引3。
为什么我下面的代码不起作用？

$('#article .click-zoom img').click(function (e) {
    alert($(this).index());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article id="dhdhdhdh">

<div class="click-zoom" style="">
  <label>
    <input type="checkbox">
    <img src="/images/imgg.png" height="100%" width="100%" alt="" class="zoom-overlay-open">
  </label>
</div>

<p>
Here is example text.
</p>

<div class="click-zoom" style="">
  <label>
    <input type="checkbox">
    <img src="/images/imdd.png" height="100%" width="100%" alt="" class="zoom-overlay-open">
  </label>
</div>

<p>
Aha, you read this.
</p>

<div class="click-zoom" style="">
  <label>
    <input type="checkbox">
    <img src="/images/imdd.png" height="100%" width="100%" alt="" class="zoom-overlay-open">
  </label>
</div>

</article>

jquery

来源：https://stackoverflow.com/questions/68142604/jquery-how-to-get-index-of-clicked-element

1条答案

按热度按时间

dy1byipe1#

假设$("#article")只是问题中的一个错字。
使用.index()将给予相对于同级的索引，而不是相对于文档的索引。您可以整理图像，然后使用images.index(this)来获取图像中的位置（这似乎是您所要求的）。
注意index()总是从0开始的，所以点击“第一个”将是索引0。如果你想要first = 1，那么就只有+1。

$('article .click-zoom img').click(function (e) {
    var images = $("article .click-zoom img");
    console.log(images.index(this));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article id="dhdhdhdh">

<div class="click-zoom" style="">
  <label>
    <input type="checkbox">
    <img src="https://placehold.co/50/black/yellow" alt="" class="zoom-overlay-open">
  </label>
</div>

<p>
Here is example text.
</p>

<div class="click-zoom" style="">
  <label>
    <input type="checkbox">
    <img src="https://placehold.co/50/black/white" alt="" class="zoom-overlay-open">
  </label>
</div>

<p>
Aha, you read this.
</p>

<div class="click-zoom" style="">
  <label>
    <input type="checkbox">
    <img src="https://placehold.co/50/black/orange" alt="" class="zoom-overlay-open">
  </label>
</div>

</article>

赞(0）回复(0）举报 2023-10-17

我来回答

jQuery如何获取被点击元素的索引？

1条答案

相关问题

热门标签

最新问答