使用 jQuery 计算所有 div 元素并在 span 内添加每个数字答案

【问题标题】：Count all div elements and add each number inside span using jQuery使用 jQuery 计算所有 div 元素并在 span 内添加每个数字
【发布时间】：2013-08-14 15:12:59
【问题描述】：

我需要在页面中按顺序显示每个div的个数

并在 span 内添加每个 div 的值

所以如果我在这样的页面内有 4 个 div

<div>first div</div>
<div>second div</div>
<div>third div</div>

每个div都需要显示他的顺序并且是这样的

<div>first div <span>1</span></div>
<div>second div <span>2</span></div>
<div>third div <span>3</span></div>

jsfiddle中的这个html示例代码

http://jsfiddle.net/CtDLe/

我需要使用 jQuery 的输出是这样的

http://jsfiddle.net/CtDLe/1/

【问题讨论】：

你试过了吗？
跟踪计数器，以1 开头（如var counter = 1;）。使用$("div").each(function (idx, el) { }); 遍历<div> 元素，并在其中使用$(el).find("span") 找到内部<span>，并使用.text(counter++) 设置其内部文本。现在尝试一下，然后返回问题

标签： javascript jquery html

【解决方案1】：

简单的each 循环就可以解决问题：

$("div").each(function(i) {
    $(this).find("span").text(++i);
});

演示：http://jsfiddle.net/CtDLe/3/

【讨论】：

【解决方案2】：

$("div").each(function(idx,elem) {
    $("<span>").text(idx).appendTo(wherever);
});

【讨论】：

【解决方案3】：

你可以试试这个：

$("div").each(function(i, elem){
 $(elem).append($("<span>"+(i+1)+"</span>"));
});

JSFiddle example

【讨论】：

【解决方案4】：

var counter = 1;
$('h1').each(function () {
    $(this).find('span').html(counter);
    counter++;
});

jsFiddle example

【讨论】：