添加一个数字序列的div

我有一个8个div的列表，需要添加一个类序列号给他们使用jquery风格他们单独。需要将它们添加到'content-block'div请参阅下面的示例。添加一个数字序列的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>

非常感谢

来源

2010-08-11 Rob

你不能有多个'content-block'的同一个id。它应该每页每个元素一次。 – Sarfraz 2010-08-11 20:34:22

jsFiddle example

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

正因为如此，我制作了content-block一堂课，并且我做了各种各样的post1,post2 ... id。

的功能下面将通过具有一个wrapper类内的content-block类元素的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); 
});

来源

2010-08-11 20:45:54

您可以使用此：

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

观测值：我使用的是类选择（”。内容块 “）没有id选择（” ＃内容块“）。

来源

2010-08-11 20:44:41 Topera

这就像一个梦想，谢谢:) – Rob 2010-08-11 21:26:08

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

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

来源

2010-08-11 20:45:29

你可能连班混乱独特的CSS的ID，它通常被用来给元素共同的外观和感觉。这里是你将如何分配唯一的ID，以您的标记中的所有元素：

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

来源

2010-08-11 20:49:24 montrealist

我唯一的疑惑是，这是从'unique-0'开始，而不是'unique-1'，就像OP指定的，但这很容易解决，但它需要一个额外的线我的回答）....由于在JS（''unique-'+ index + 1'不起作用）+'串联的疯狂。 – 2010-08-11 21:47:19

'++ index'怎么样？ – montrealist 2010-08-12 14:15:04

“无效的增量操作数” – 2010-08-12 16:52:41

如果您摆脱的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> 
...

来源

2010-08-11 20:55:23 user113716

为什么不把你的div到李一OL元素的一部分？在语义上更相关...

来源

2010-08-11 21:01:06 pixeline

添加一个数字序列的div

回答

相关问题