1

我被困在一些事情上，希望你能帮助我。我在 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 将是最好的选择，但我愿意接受任何建议。

任何帮助是极大的赞赏！

4

3 回答 3

5 
$(".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);​
于 2012-07-13T15:22:52.377 回答
1

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

$(".royalControlNavCenterer > a").each(function(i) {
   $(this).attr("id", i+1);
});
于 2012-07-13T15:22:49.533 回答
1

你可以通过在你的末尾添加这个来做到这一点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 标准这一事实感到困扰的人：

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

于 2012-07-13T15:22:58.127 回答