每个孩子的单独课

我被困在某些东西上，我希望你能帮助我。我在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将是这个最好的选择，但我对任何建议都开放。

任何帮助，非常感谢！

来源

2012-07-13 Jason Schot

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

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

来源

2012-07-13 15:22:49

$(".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);

来源

2012-07-13 15:22:52 Esailija

+1唯一一个 – Adil 2012-07-13 15:24:30

@Adil只要他不想1索引，你可以做'.prop（ID，数量）'; < – Esailija 2012-07-13 15:26:26

我喜欢这种解决方案比我的更好！更频繁地使用它。谢谢！ – 2012-07-13 15:27:19

您可以加入做脱身这在你的的末尾：

<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显示控制台）

看来我是通过这样的事实困扰，所提出的IDS没有按照HTML 4 standard只有一个：

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

来源

2012-07-13 15:22:58

哇，感谢您的超级快速解答！我会尝试实现这一点，对于我的代码中这个代码片段最适合的位置有什么建议？（我是javascript的总新手，并且滑块插件的js被压缩） – 2012-07-13 15:27:43

HTML5允许使用这些类型的ID，因此旧标准的限制仅适用于使用旧DOCTYPE的情况。 – kapa 2012-07-13 15:34:31

@JasonSchot我在我的回答中精简了你可以插入代码的地方。 – 2012-07-13 15:36:08

每个孩子的单独课

回答

相关问题