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

这应该有用......它会针对a的直接royalControlNavCenterer个孩子，并从1开始向他们提供id属性并从那里开始。

$(".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]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句点（“。”）。

每个孩子分开上课

3 个答案: