John John - 4 months ago 9
Javascript Question

Numbering certain divs inside another div

I have a form that can be duplicated what i want is to add numbering in front of it so the result is similar to this



.form_div div {
display: inline-block;
margin: 5px;
}

<div id="main_div">
<div class="form_div">
<div class="count">1</div>
<div><input name="name_1" id="name_1" value="" type="text" /></div>
</div>
<div class="form_div">
<div class="count">2</div>
<div class="form_div"><input name="name_2" id="name_2" value="" type="text" /></div>
</div>
<div class="form_div">
<div class="count">3</div>
<div><input name="name_3" id="name_3" value="" type="text" /></div>
</div>
</div>





I got this function that i call in the duplicate function but it will set the same number to every div with a class .count

function divcounter(){
var numbercounter = 1;
$('#main_div').find('.count').each(function(){
var innerDivId = $(this).attr('id');
$(".count").text(numbercounter ++);

});
}


What i want it to do is numbering the divs with that class that are not hidden 1, 2, 3 and so on.

Answer

You need to use this to refer the current element inside the each() method.

function divcounter(){
    var numbercounter = 1;
    $('#main_div').find('.count').each(function(){
        var innerDivId = $(this).attr('id');
        $(this).text(numbercounter++);
        //^^^^-----------here--------
    });
}

function divcounter() {
  var numbercounter = 1;
  $('#main_div').find('.count').each(function() {
    var innerDivId = $(this).attr('id');
    $(this).text(numbercounter++);
    //^^^^-----------here--------
  });
}
divcounter();
.form_div div {
  display: inline-block;
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_div">
  <div class="form_div">
    <div class="count">1</div>
    <div>
      <input name="name_1" id="name_1" value="" type="text" />
    </div>
  </div>
  <div class="form_div">
    <div class="count">2</div>
    <div class="form_div">
      <input name="name_2" id="name_2" value="" type="text" />
    </div>
  </div>
  <div class="form_div">
    <div class="count">3</div>
    <div>
      <input name="name_3" id="name_3" value="" type="text" />
    </div>
  </div>
</div>


You can even avoid the counter variable by using index param in callback funtion.

function divcounter(){
    $('#main_div').find('.count').each(function(i){
        //--------------------------------------^^^----
        var innerDivId = $(this).attr('id');
        $(this).text(i + 1);
        //^^^^-------^^^^^^----here--------
    });
}

function divcounter() {
  $('#main_div').find('.count').each(function(i) {
    //--------------------------------------^^^----
    var innerDivId = $(this).attr('id');
    $(this).text(i + 1);
    //^^^^-------^^^^^^----here--------
  });
}
divcounter();
.form_div div {
  display: inline-block;
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_div">
  <div class="form_div">
    <div class="count">1</div>
    <div>
      <input name="name_1" id="name_1" value="" type="text" />
    </div>
  </div>
  <div class="form_div">
    <div class="count">2</div>
    <div class="form_div">
      <input name="name_2" id="name_2" value="" type="text" />
    </div>
  </div>
  <div class="form_div">
    <div class="count">3</div>
    <div>
      <input name="name_3" id="name_3" value="" type="text" />
    </div>
  </div>
</div>


Although use single selector instead of chained find() if you don't want any reference to $('#main_div').

$('#main_div .count')