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>

非常感谢

Answer 1

jsFiddle example

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

因此我将content-block作为一个课程，然后我制作了各种post1，post2 ... ID。

以下函数将浏览content-block类中wrapper类的each个元素，并为每个元素添加适当的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);
});

Answer 2

您可能会将唯一的CSS ID与类混淆，这些类通常用于为元素提供通用的外观。以下是为标记中的所有元素指定唯一ID的方法：

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

Answer 3

如果你摆脱了ID，你可以简单地做到这一点（假设每<div>只有一个孩子.wrapper。

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

Answer 4

您可以使用：

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

Obs：我正在使用类选择器（“.content-block”）而不是id选择器（“＃content-block”）。

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

Answer 6

为什么不把你的div变成li，OL元素的一部分？在语义上更相关...

向div添加一系列数字

6 个答案: