javascript - 如何动态为元素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>