jquery - 每个 child 单独上课

Question

我遇到了一些困难，希望你能帮助我。我正在 WordPress 上使用 slider 插件，需要控制每个缩略图。我想为 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 开始的索引没问题，即:

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