每个孩子分开上课

Question

我坚持一些我希望你能帮助我的东西.我在WordPress上使用滑块插件,需要控制每个缩略图.我想为div中的每个子元素添加一个唯一的ID,这样我就可以使用CSS来设置它.

这是代码的样子:

<div class="royalControlNavCenterer">
  <a class="current" href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
</div>

如您所见,插件已添加当前类.我正在寻找的是类似地,动态地为每个元素添加一个类,所以它看起来如下:

<div class="royalControlNavCenterer">
  <a id="1" class="current" href="#">1</a>
  <a id="2" href="#">2</a>
  <a id="3" href="#">3</a>
  <a id="4" href="#">4</a>
  <a id="5" href="#">5</a>
</div>

这样我就可以分别设计每个缩略图,这是我的设计所需要的.我认为jQuery将是最好的选择,但我愿意接受任何建议.

任何帮助是极大的赞赏!

Answer 1

$(".royalControlNavCenterer > a").prop( "id", function( i ) {
    return i + 1;
});

如果基于0的索引是可以的,IE:

<div class="royalControlNavCenterer">
  <a class="current" href="#" id="0">1</a>
  <a href="#" id="1">2</a>
  <a href="#" id="2">3</a>
  <a href="#" id="3">4</a>
  <a href="#" id="4">5</a>
</div>

你可以逃脱

$(".royalControlNavCenterer > a").prop("id",? Number);?