javascript - 如何索引jquery中的每个元素

Question

我需要像这样索引每个元素 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>

Answer 1

只需更改您的脚本:

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();