每个孩子单独上课

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 的索引没问题，I.E：

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

Answer 2

这应该可以工作...它将直接针对royalControlNavCenterer 的子a 并给他们一个id 属性，从1 开始并从那里向上。

$(".royalControlNavCenterer > a").each(function(i) {
   $(this).attr("id", i+1);
});

Answer 3

您可以在body 的末尾添加以下内容：

<script type="text/javascript">
$(window).load(function(){
    var globalCount = 0;   
    $('.royalControlNavCenterer a').each(function(){
       this.id='id_'+(globalCount++);
    });
});
</script>

但我不确定我是否明白提供动态 ID 的意义。您不必这样做来提供单独的样式。

演示：http://jsfiddle.net/dystroy/LrBxc/（按 F12 显示控制台）

似乎只有我一个人对提议的 ID 没有遵循 HTML 4 standard 的事实感到困扰：

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，并且可以是 后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、 下划线（“_”）、冒号（“:”）和句点（“.”）。