Question

我有这些div

<div id="main">
  <div></div>
  <div></div>
</div>

我希望以某种方式使用javascript自动读取#main中有多少div，并以数字方式标记它们。输出应为

<div id="main">
  <div class="1"></div>
  <div class="2"></div>
</div>

Answer 1

不需要jQuery：

var divs = document.getElementById("main").getElementsByTagName("div");
for (var i = 0; i < divs.length; i += 1) {
    divs[i].setAttribute('class', i + 1);
}
divs.length; // this is the number of div children.

Answer 2

你可以做到

var el = document.getElementById('main'),
    count = 0;
for (var i = 0; i < el.children.length; i++) {
    if (el.children[i].nodeName == 'DIV') {
        el.children[i].className = ++count;
    }
}

演示：Fiddle

如果你的页面中有jQuery，它应该像

一样简单

$('#main > div').addClass(function (i, clazz) {
    return '' + (i + 1)
})

演示：Fiddle

Answer 3

首先：1，2，3不是有效的类名。请参阅here。

名称必须以下划线（_），短划线（ - ）或字母（a-z）开头，后跟任意数量的短划线，下划线，字母或数字。

第二：'class'是future reserved word。请改用className。

以下是使用纯javascript和合法css名称的示例： jsfiddle

的CSS：

.foo1
{
    color:blue;    
}
.foo2
{
    color:red;    
}

HTML：

<div id="main">
  <div>1</div>
  <div>2</div>
</div>

Javascript：

var elem = document.getElementById("main");
var childDivs = elem.getElementsByTagName("div");
for (var i = 0; i < childDivs.length; i++) 
{        
    childDivs[i].className = 'foo' + (i+1).toString();
}

Answer 4

为此：I want to somehow use javascript to automatically read how many divs are inside #main。您可以使用：

$("#main").find("div").length

＆安培;添加clas部分：

$("#main").find("div").each(function(index1) {
   $(this).addClass(parseInt(index1) + 1) ;
});

Answer 5

像这样使用Jquery

$('#main div').each(function(i, o) {
    $(o).addClass(i+1)
})

Answer 6

var DivCount = 0;

$("#main").find("div").each(function(index,value){

      DivCount = DivCount+1;
      $(value).attr("class",DivCount);
});

Javascript标签div类数字？

6 个答案: