blocks|key|1616603|text|您可以使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1616604|$(".content-block").each(function(i){
++++$(this).addClass("post"+%2B+i);
})|code-block|syntax|javascript|1616605|Obs:我使用的是类选择器(".content-block")而不是id选择器("#content-block")。|1616606|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can use this:</p>

<pre><code>$(".content-block").each(function(i){
    $(this).addClass("post" + i);
})
</code></pre>

<p>Obs: I'm using class selector (".content-block") not id selector ("#content-block").</p>


blocks|key|1616617|text|假设您修复了重复的id问题，并且有一个外部容器对象。然后我们就会有：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1616618|$('div#outercontainer').find('div.wrapper+>+div').each(+function(i){
++var+postnum+=+i%2B1;+//+remove+any+possible+overloaded+"%2B"+operator+ambiguity
++$(this).addClass('post'%2Bpostnum);
});|code-block|syntax|javascript|1616619|entityMap^0|9|2|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Let's assume you fix the duplicated <code>id</code> problem, and you have an outer container object. Then we'd have:</p>

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


blocks|key|873797|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|873798|首先，一个ID在一个页面上只能使用一次。您可以在一个页面上多次使用类。|873799|正因为如此，我使content-block成为一个类，并且我使您的各种post1，post2...ids。|offset|length|style|CODE|873800|下面的函数将遍历在wrapper类中具有content-block类的元素的，并为每个元素添加适当的id。对于each()的回调函数，可以使用index和value作为参数。我创建了一个单独的num变量，因为index从零开始。|873801|在each函数中，您还可以使用this而不是value。|873802|jQuery：|873803|$.each($(".wrapper+>+.content-block"),+function(index,+value){
++++var+num+=+index+%2B+1;
++++$(value).attr("id","post"%2B+num);
});|code-block|syntax|javascript|873804|entityMap^0|0|0|8|D|Z|5|15|5|0|9|7|K|D|1E|2|1J|6|1Z|5|25|5|2O|3|2W|5|0|1|4|F|4|M|5|0|0|0^^$0|@$1|2|3|-4|4|5|6|V|7|@]|8|@]|9|$]]|$1|A|3|B|4|5|6|W|7|@]|8|@]|9|$]]|$1|C|3|D|4|5|6|X|7|@$E|Y|F|Z|G|H]|$E|10|F|11|G|H]|$E|12|F|13|G|H]]|8|@]|9|$]]|$1|I|3|J|4|5|6|14|7|@$E|15|F|16|G|H]|$E|17|F|18|G|H]|$E|19|F|1A|G|H]|$E|1B|F|1C|G|H]|$E|1D|F|1E|G|H]|$E|1F|F|1G|G|H]|$E|1H|F|1I|G|H]|$E|1J|F|1K|G|H]]|8|@]|9|$]]|$1|K|3|L|4|5|6|1L|7|@$E|1M|F|1N|G|H]|$E|1O|F|1P|G|H]|$E|1Q|F|1R|G|H]]|8|@]|9|$]]|$1|M|3|N|4|5|6|1S|7|@]|8|@]|9|$]]|$1|O|3|P|4|Q|6|1T|7|@]|8|@]|9|$R|S]]|$1|T|3|-4|4|5|6|1U|7|@]|8|@]|9|$]]]|U|$]]

<p><a href="http://jsfiddle.net/3aTNY/" rel="noreferrer"><strong>jsFiddle example</strong></a></p>

<p>First, you can only use an ID once on a page. You can use classes many times on a page.</p>

<p>Because of this I made <code>content-block</code> a class, and I made your various <code>post1</code>, <code>post2</code>... ids.</p>

<p>The function below will go through <a href="http://api.jquery.com/jQuery.each/" rel="noreferrer"><strong>each</strong></a> of the elements that have the <code>content-block</code> class within a <code>wrapper</code> class, and it will add an appropriate <code>id</code> to each one. For the callback function of <code>each()</code> you can make use of the <code>index</code> and <code>value</code> as arguments. I created a separate <code>num</code> variable, since <code>index</code> starts at zero.</p>

<p>In the <code>each</code> function, you could also use <code>this</code> instead of <code>value</code>.</p>

<p>The jQuery:</p>

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


blocks|key|1620381|text|您可能会将唯一的CSS与类混淆，后者通常用于为元素提供通用的外观。下面是如何为标记中的所有元素分配唯一ID的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1620382|$('.wrapper').find('div').each(function(index){
++++$(this).attr('id',+'unique-'+%2B+%2B%2Bindex);
});|code-block|syntax|javascript|1620383|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You are probably confusing unique CSS IDs with classes, which are normally used to give elements a common look and feel. Here's how you would assign unique IDs to all elements within your markup:</p>

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


blocks|key|1616677|text|如果您去掉了If，您可以简单地这样做(假设每个.wrapper只有一个子<div>。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1616678|$(".wrapper+>+div").addClass(function(i)+{+return+'post'+%2B+(i+%2B+1)+});|code-block|syntax|javascript|1616679|这将导致：|1616680|<div+class="wrapper">
++++<div+class="post1"></div>
</div>
<div+class="wrapper">
++++<div+class="post2"></div>
</div>
<div+class="wrapper">
++++<div+class="post3"></div>
</div>
...|1616681|entityMap^0|N|8|10|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>If you get rid of the IDs, you could simply do this (assuming there's only one child <code>&lt;div&gt;</code> per <code>.wrapper</code>.</p>

<pre><code>$(".wrapper &gt; div").addClass(function(i) { return 'post' + (i + 1) });
</code></pre>

<p>This will result in:</p>

<pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="post1"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="wrapper"&gt;
    &lt;div class="post2"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="wrapper"&gt;
    &lt;div class="post3"&gt;&lt;/div&gt;
&lt;/div&gt;
...
</code></pre>


blocks|key|1616692|text|为什么不把div变成li，它是OL元素的一部分呢？语义上更相关..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1616693|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Why not turn your divs into li, part of a OL element? Semantically more relevant...</p>


<p>I have a list of 8 divs and need to add a sequence of class numbers to them using Jquery to style them individually. Need to add them to the 'content-block' div see example below.</p>

<p>The desired effect will be something like this:</p>

<pre><code>&lt;div class="wrapper"&gt;
&lt;div id="content-block" *class="post1"*&gt;
&lt;/div&gt;&lt;/div&gt;

&lt;div class="wrapper"&gt;
&lt;div id="content-block" *class="post2"*&gt;
&lt;/div&gt;&lt;/div&gt;
</code></pre>

<p>I have added the script</p>

<pre><code>**Javascript**
$('.post-block').each(function(i){
$(this).addClass('post' + i);})
</code></pre>

<p>but I need to link them with anchor links so I will need a way to add an ID to the post-block.</p>

<pre><code>Desired effect
**HTML**
&lt;div id="post1" class="post-block"&gt;
&lt;/div&gt;

&lt;div id="post2" class="post-block"&gt;
&lt;/div&gt;
</code></pre>

<p>Many thanks</p>


Add a sequence of numbers to divs

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个包含8个div的列表，需要使用Jquery为它们添加一个类号序列，以单独设置它们的样式。需要将它们添加到“content-block”div中，请参见下面的示例。所需的效果如下所示：<div class="wrapper"><div id="content-block" *class="post1"*></di...

问将一系列数字添加到div
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将一系列数字添加到divEN