Question

我对这个JQUERY编号有问题，我想只重置绿表数据的计数器，第一表数据好1），2），3）但是下表数据是4），5），6）I想要将其重置为绿色表数据的1），2），3），4）等等

我在javascript中使用的代码是

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

部分代码是

<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 1

在这种情况下，您需要遍历每个集合和数字项目，直到找到相同或更高订单的元素，如

＆＃13;

$(".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;
}

＆＃13;

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

＆＃13;

Answer 2

有点奇怪，但是让我们试一试......

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您只需在jquery中添加if条件即可。更改$（＆＃39; .lv2name＆＃39;）。each（）函数如下：

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

Answer 4

这是一种仅限CSS的方法。

由于您可以操作DOM并且计数器将自动更新，因此通过Javascript方法可以获得很多好处。使用Javascript方法实现这一目标将是一个巨大的痛苦。

你做的唯一特别的事情我能用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) "). ";
}

以下是快速演示：https://jsfiddle.net/crswll/ysjrwodL/1/

基于类div的Jquery自动编号，但在指定的div

4 个答案: