Как динамически нумеровать атрибут данных для элементов jquery?

Question

У меня есть:

<div class="slide-img">
    <img src="img/bg1.jpg" alt="">
</div>
<div class="slide-img">
    <img src="img/bg2.jpg" alt="">
</div>

Я хочу добавить в img новый атрибут data-index с его номером в списке динамически. Я попробовал что-то подобное, но это не правильно:

var $slides = $(".slide-img img");
for( var i = 0; i < $slides.length; i++ ){
    $slides.attr("data-index", i);
};

Можете ли вы мне помочь, пожалуйста? Заранее спасибо!

Answer 1

У тебя почти было это. Вам просто нужно [i], чтобы оно выглядело как $($slides[i])

var $slides = $(".slide-img img");
for( var i = 0; i < $slides.length; i++ ){
    $($slides[i]).attr("data-index", i);
};

Проблема: $slides.attr("data-index", i); установит самое высокое значение i для всех $slides

Демо

var $slides = $(".slide-img img");
for( var i = 0; i < $slides.length; i++ ){
    $($slides[i]).attr("data-index", i);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-img">
    <img src="img/bg1.jpg" alt=""> alt
</div>
<div class="slide-img">
    <img src="img/bg2.jpg" alt=""> alt
</div>

Answer 2

Использование чистого JQuery раствора:

$(".slide-img img").each(function(i){
    $(this).data("index", i);
});
    
//validation script - print all index in the closest <span>
$(".slide-img img").each(function(){$(this).siblings().text($(this).data("index"))});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-img">
    <img src="img/bg1.jpg" alt="">
    <span></span>
</div>
<div class="slide-img">
    <img src="img/bg2.jpg" alt="">
    <span></span>
</div>
<div class="slide-img">
    <img src="img/bg1.jpg" alt="">
    <span></span>
</div>
<div class="slide-img">
    <img src="img/bg2.jpg" alt="">
    <span></span>
</div>
<div class="slide-img">
    <img src="img/bg1.jpg" alt="">
    <span></span>
</div>
<div class="slide-img">
    <img src="img/bg2.jpg" alt="">
    <span></span>
</div>