How to make sequence number from attribute class Div which have random number with jQuery?

Question

I have a div like this:

<div id="masterDiv">
  <div id="childDiv" class="3" ></div>
  <div id="childDiv" class="5" ></div>
  <div id="childDiv" class="10" ></div>
</div>

How can I make value from attribute class become sequence number when clicked? Like this:

<div id="masterDiv">
  <div id="childDiv" class="1" ></div>
  <div id="childDiv" class="2" ></div>
  <div id="childDiv" class="3" ></div>
</div>

Just a quick pointer: [what-characters-are-valid-in-css-class-names][1] [1]: http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names — GDW, Apr 21 '12 at 10:15
When you give elements an id attribute, it should be unique. — Teun Zengerink, Apr 21 '12 at 10:19

score 2 · Answer 1 · answered Apr 21 '12 at 10:16

2

$(document).ready(function(){
    $("#masterDiv > div").each(function(i, item){
        $(this).attr("class", i + 1);      
    });            
});

answered Apr 21 '12 at 10:16

Teun Zengerink

Prashanth Thurairatnam · Answer 2 · 2012-04-21T10:33:59.160

Ideally id values should be unique. That is the whole purpose of using an id. In your case instead of id make use of multiple class names

<div id="masterDiv">
 <div class="childDiv 3" ></div>
 <div class="childDiv 5" ></div>
 <div class="childDiv 10" ></div>
</div>

then try this (I've slightly modified Rory's solution)

$(".childDiv").each(function(index) {
 $(this).removeClass().addClass(index + 1).addClass("childDiv");
});

score 0 · Answer 3 · answered Apr 21 '12 at 10:14

0

Try this:

$(".childDiv").each(function(index) {
    $(this).removeClass().addClass(index);
});

answered Apr 21 '12 at 10:14

Rory McCrossan

this code will remove the value of attr class. I have found the solve from Mytho. thanks for help. – pajar Apr 21 '12 at 10:25

score 0 · Answer 4 · edited Nov 24 '15 at 11:02

0

Code sample:

$("#masterDiv > div").attr("class", function(arr) {return "classname"+arr;})
});

edited Nov 24 '15 at 11:02

Karl Gjertsen

answered Nov 24 '15 at 10:39

hitesh bariya

But it will start form zero and you can remove that div which has class with zero index by hasClass – hitesh bariya Nov 24 '15 at 10:42
adjutement ofr zero index class $("#masterDiv > div").attr("class", function(arr) {return "classname"+(arr+1);}) }); – hitesh bariya Nov 24 '15 at 11:09

4 Answers4