Javascript label div classes numerically?

Question

I have these divs

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

and I want to somehow use javascript to automatically read how many divs are inside #main and also label them numerically. The output should be

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

Answer 1

No need for 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

You can do

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

Demo: Fiddle

---

If you have jQuery in your page, it should be as simple as

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

Demo: Fiddle

Answer 3

First: 1, 2, 3, are not valid class names. See here.

a name must begin with an underscore (_), a dash (-), or a letter(a–z), followed by any number of dashes, underscores, letters, or numbers.

Second: 'class' is a future reserved word. Use className instead.

Here is an example using pure javascript and legal css names: 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

For this : I want to somehow use javascript to automatically read how many divs are inside #main . You might use :

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

& for adding clas part :

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

Answer 5

Use Jquery like this

$('#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);
});