javascript - jQuery 动态 div id 与 .each() 不起作用

Question

我用类创建了 5 个 div

$(document).ready(function(){
   var numSlide = $('.slide_text').length;
   var slideLoop;
   var numSlideTemp = 1;
   for(slideLoop=numSlideTemp;slideLoop<=numSlide;slideLoop++){
      $('.slide_text').attr('id', 'slide_text_' + slideLoop);
   }
   $('#slide_text_3').html('OK!');
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div class="slide_text">Slide 1</div>
<div class="slide_text">Slide 2</div>
<div class="slide_text">Slide 3</div>
<div class="slide_text">Slide 4</div>
<div class="slide_text">Slide 5</div>

我想为每个 div 添加属性 ID，但在运行此脚本后，所有 ID 设置为 slide_text_5。

我想要结果(id)，例如:

• slide_text_1
• slide_text_2
• slide_text_3
• slide_text_4
• slide_text_5

在每个 div 中。

我的脚本有问题吗？提前谢谢。

Answer 1

for (slideLoop=numSlideTemp;slideLoop<numSlide;slideLoop++){
   $('.slide_text').eq(slideLoop - 1).attr('id', 'slide_text_' + slideLoop);
}

使用eq()，这样您就可以只更改您想要更改的单个元素。否则您将全部更改。

这也可以写成:

$('.slide_text').each(function(index, element){
    element.id = 'slide_text_'+ ( index + 1 );
});