将一系列数字添加到div中

Question

我有一个由8个div组成的列表，并需要使用Jquery为它们添加一系列类号，以便分别对它们进行样式设置。需要将它们添加到“content-block” div中，如下所示：

期望的效果将类似于这样：

<div class="wrapper">
<div id="content-block" *class="post1"*>
</div></div>

<div class="wrapper">
<div id="content-block" *class="post2"*>
</div></div>

我已经添加了这个脚本。

**Javascript**
$('.post-block').each(function(i){
$(this).addClass('post' + i);})

但我需要使用锚链接将它们链接起来，因此需要一种添加ID到帖子块的方法。

Desired effect
**HTML**
<div id="post1" class="post-block">
</div>

<div id="post2" class="post-block">
</div>

非常感谢

- Rob

---

每个“content-block”元素的id在同一个页面上只能出现一次，不能重复。 - Sarfraz

Answer 1

jsFiddle示例

首先，页面上只能使用一个ID，但可以在页面上多次使用类。

因此，我将content-block设置为类，并将您的各种post1、post2...设置为ID。

以下函数将遍历每个具有wrapper类中content-block类的元素，并向每个元素添加适当的id。对于each()的回调函数，您可以利用index和value作为参数。我创建了一个单独的num变量，因为index从零开始。

在each函数中，您也可以使用this代替value。

jQuery代码：

$.each($(".wrapper > .content-block"), function(index, value){
    var num = index + 1;
    $(value).attr("id","post"+ num);
});

- Peter Ajtai

Answer 2

你可以使用这个：

$(".content-block").each(function(i){
    $(this).addClass("post" + i);
})

注意：我正在使用类选择器（“.content-block”）而不是ID选择器（“#content-block”）。

- Topera

Answer 3

你可能将唯一的CSS ID与类混淆了，类通常用于给元素赋予共同的外观和感觉。以下是如何为标记中的所有元素分配唯一ID的方法：

$('.wrapper').find('div').each(function(index){
    $(this).attr('id', 'unique-' + ++index);
});

- montrealist

---

我唯一的抱怨是它从unique-0开始，而不是像 OP 指定的那样从unique-1开始，但这很容易解决，需要一行额外代码（例如我的答案）... 因为在 JS 中的 + 字符串连接方式非常疯狂（'unique-' + index + 1 不起作用）。 - Peter Ajtai

Answer 4

如果你去掉ID，你可以简单地这样做（假设每个.wrapper只有一个子元素<div>）。

$(".wrapper > div").addClass(function(i) { return 'post' + (i + 1) });

这将导致：

<div class="wrapper">
    <div class="post1"></div>
</div>
<div class="wrapper">
    <div class="post2"></div>
</div>
<div class="wrapper">
    <div class="post3"></div>
</div>
...

- user113716

Answer 5

假设您已经解决了重复的id问题，并且有一个外部容器对象。那么我们会有：

$('div#outercontainer').find('div.wrapper > div').each( function(i){
  var postnum = i+1; // remove any possible overloaded "+" operator ambiguity
  $(this).addClass('post'+postnum);
});

- Ken Redler

Answer 6

为什么不将您的

元素转换为

元素，作为

元素的一部分？语义上更相关...

- pixeline