Jquery auto numbering based on class div, but reset counter on specified div

Question

I have a problem with this JQUERY numbering, all I want just reset counter of green tables data, first tables data is good 1),2),3) but next tables data is 4),5),6) I want to reset it to 1),2),3),4) and so on for the green tables data

The code I used in javascript is

            var num1=1,num2=1,num3=1,num4=1;
            $(".lv0name").each( function() {$(this).text(romanize(num1)  +". "+ $(this).text());num1++;});
            $(".lv1name").each( function() {$(this).text(num2 +". "+ $(this).text());num2++;});
            $(".lv2name").each( function() {$(this).text(num3 +"). "+ $(this).text());num3++;});
            $(".lv3name").each( function() {$(this).text(num4 +". "+ $(this).text());num4++;});

Part of the code is

<table border="1" id="tabletabular" class="tablenum">
<tr>
    <td bgcolor="blue" class="lv0name" id="root40" style="padding-left: 20px;">Luas Wilayah</td>
</tr>
<tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Daratan</td>
</tr>
<tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Laut 12 Mil dari Darat</td>
</tr>
<tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Zona Laut</td>
</tr>

<tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Laut Teritorial</td>
</tr>
<tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Zona Ekonomi Ekslusif</td>  
</tr>
<tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Laut Landasan Kontinen</td>
</tr>

<tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Panjang Garis Pantai</td>
</tr>
<tr>
    <td bgcolor="blue" class="lv0name" id="root41" style="padding-left: 20px;">Topografi</td>
</tr>
<tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Luas Lahan Berdasarkan Kelas Lereng</td>
</tr>
<tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Datar (0-2 Derajat)</td>
</tr>
<tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Bergelombang (2-15 Derajat)</td>
</tr>
<tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Curam (15-40 Derajat)</td>
</tr>
<tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Sangat Curam (&gt;40 Derajat)</td>
</tr>

Here is the screenshot

Regard

Answer 1

Here goes a CSS only approach.

There's plenty of benefits to this over the Javascript approach since you can manipulate the DOM and the counters will update automatically. It would be a huge pain to accomplish that with the Javascript approach.

The only special thing you were doing I was able to accomplish with a css counter.

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
  background-color: blue;
  text-indent: 20px;
  margin: 0;
  padding: 0;
}

ol ol {
  list-style-type: decimal;
  background-color: yellow;
  text-indent: 40px
}

ol ol ol {
  counter-reset: section;
  list-style-type: none;
  background-color: green;
  text-indent: 60px
}

ol ol ol li::before {
  counter-increment: section;
  content: counter(section) "). ";
}

Here goes a quick demo: https://jsfiddle.net/crswll/ysjrwodL/1/

Answer 2

You can just add an if condition to your jquery. Change $('.lv2name').each() function as below:

 $(".lv2name").each(function() {
 if ($(this).parent().prev().children().attr('class') == 'lv1name') {
   num3 = 1;
 }
 $(this).text(num3 + "). " + $(this).text());
 num3++;
});

Answer 3

Kinda strange, but lets give it a shot...

$(function(){
  var num = 1;
  
  $(".lv0name").each(function() {
    var $this = $(this);
    
    $this.text(num++ +". "+ $this.text());
  });
  
  $(".lv1name").each(function() {
    var $this = $(this);
    
    if ($this.parent().prev().find('td').hasClass('lv0name')) num = 1;
    
    $this.text(num++ +". "+ $this.text());
  });
  
  $(".lv2name").each(function() {
    var $this = $(this);
    
    if ($this.parent().prev().find('td').hasClass('lv1name')) num = 1;
    
    $this.text(num++ +". "+ $this.text());
  });
  
  $(".lv3name").each(function() {
    var $this = $(this);
    
    if ($this.parent().prev().find('td').hasClass('lv2name')) num = 1;
    
    $this.text(num++ +". "+ $this.text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" id="tabletabular" class="tablenum">
<tr>
    <td bgcolor="blue" class="lv0name" id="root40" style="padding-left: 20px;">Luas Wilayah</td>
</tr>
<tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Daratan</td>
</tr>
<tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Laut 12 Mil dari Darat</td>
</tr>
<tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Zona Laut</td>
</tr>

<tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Laut Teritorial</td>
</tr>
<tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Zona Ekonomi Ekslusif</td>  
</tr>
<tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Laut Landasan Kontinen</td>
</tr>

<tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Panjang Garis Pantai</td>
</tr>
<tr>
    <td bgcolor="blue" class="lv0name" id="root41" style="padding-left: 20px;">Topografi</td>
</tr>
<tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Luas Lahan Berdasarkan Kelas Lereng</td>
</tr>
<tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Datar (0-2 Derajat)</td>
</tr>
<tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Bergelombang (2-15 Derajat)</td>
</tr>
<tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Curam (15-40 Derajat)</td>
</tr>
<tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Sangat Curam (&gt;40 Derajat)</td>
</tr>

Answer 4

In that case you need to iterate over each set and number items till a element of same order or higher is found like

$(".lv0name").each(function(i) {
  $(this).text(romanize(i + 1) + ". " + $(this).text());

  $(this).parent().nextUntil(':has(.lv0name)').find(".lv1name").each(function(i) {
    $(this).text((i + 1) + ". " + $(this).text());

    $(this).parent().nextUntil(':has(.lv1name, .lv0name)').find(".lv2name").each(function(i) {
      $(this).text((i + 1) + ". " + $(this).text());

      $(this).parent().nextUntil(':has(.lv0name, .lv1name, .lv2name)').find(".lv3name").each(function(i) {
        $(this).text((i + 1) + ". " + $(this).text());
      });
    });
  });



});



function romanize(r) {
  return r;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tabletabular" class="tablenum">
  <tr>
    <td bgcolor="blue" class="lv0name" id="root40" style="padding-left: 20px;">Luas Wilayah</td>
  </tr>
  <tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Daratan</td>
  </tr>
  <tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Laut 12 Mil dari Darat</td>
  </tr>
  <tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Zona Laut</td>
  </tr>

  <tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Laut Teritorial</td>
  </tr>
  <tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Zona Ekonomi Ekslusif</td>
  </tr>
  <tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Laut Landasan Kontinen</td>
  </tr>

  <tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Panjang Garis Pantai</td>
  </tr>
  <tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Laut Teritorial</td>
  </tr>
  <tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Zona Ekonomi Ekslusif</td>
  </tr>
  <tr>
    <td bgcolor="blue" class="lv0name" id="root41" style="padding-left: 20px;">Topografi</td>
  </tr>
  <tr>
    <td bgcolor="yellow" class="lv1name" style="padding-left: 40px;">Luas Lahan Berdasarkan Kelas Lereng</td>
  </tr>
  <tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Datar (0-2 Derajat)</td>
  </tr>
  <tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Bergelombang (2-15 Derajat)</td>
  </tr>
  <tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Curam (15-40 Derajat)</td>
  </tr>
  <tr>
    <td bgcolor="green" class="lv2name" style="padding-left: 60px;">Sangat Curam (&gt;40 Derajat)</td>
  </tr>