如何索引jquery中的每个元素

how to index each element in jquery

本文关键字：元素 jquery 何索引 索引      更新时间：2023-09-26

我需要对每个元素进行索引，如1/8、2/8、3/8

$(document).ready(function () {
    var Thumbnail = $('.thm-img'); // main image wrapper
    function ThumbnailCounter() {
        var AllNumber = $(Thumbnail).length;
        $(Thumbnail).each(function () {
            var CurrentActive = $(Thumbnail).index() + 1; //return current number active thumbnail
            $(this).children('span').append(CurrentActive  + '/' +  AllNumber);
        });
    }
    new ThumbnailCounter();
});
.thm-img {
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="thumb-wrp scrollbar-inner">
  <div class="thm-img">
    <img src="../img/img/a.jpg"><span class="numeric active"></span>
  </div>
  <div class="thm-img">
    <img src="../img/img/b.jpg"><span class="numeric"></span>
  </div>
  <div class="thm-img">
    <img src="../img/img/c.jpg"><span class="numeric"></span>
  </div>
  <div class="thm-img">
    <img src="../img/img/d.jpg"><span class="numeric"></span>
  </div>
  <div class="thm-img">
    <img src="../img/img/a.jpg"><span class="numeric"></span>
  </div>
  <div class="thm-img">
    <img src="../img/img/c.jpg"><span class="numeric"></span>
  </div>
  <div class="thm-img">
    <img src="../img/img/b.jpg"><span class="numeric"></span>
  </div>
  <div class="thm-img">
    <img src="../img/img/d.jpg"><span class="numeric"></span>
  </div>
</div>

只需更改脚本：

function ThumbnailCounter() {
        var AllNumber = $(Thumbnail).length;
        $('.thm-img').each(function () {
            var CurrentActive = $(this).index() + 1; // Use $(this) to reference to current element - it will give you right index
            $(this).children('span').append(CurrentActive  + '/' +  AllNumber);
        });
    }
    new ThumbnailCounter();

您可以使用，

$(".thumb-wrp .thm-img").each(function() {
  var index = $(".thumb-wrp .thm-img").index(this) + 1;
  var total = $(".thumb-wrp .thm-img").length;
  $(this).find("span").text(index + "/" + total);
})

Fiddle

尝试

 var CurrentActive = $(this).index() + 1;
相关文章：