get the index of an element within its class-CodePudding

i want to get the index of tr in its class "foo",but i want it to count only the elements with this class inside the table and not every "foo" in the body. So i want i to get this :

TABLE	TABLE	TABLE
0	0	0
1	1	1
2	2	2

Instead of this :

TABLE	TABLE	TABLE
0	3	6
1	4	7
2	5	8

I have tried the following but i get the index of tr in "foo" counting the whole page and not only inside the table :

document.querySelectorAll("td").forEach(i => {
  $(i).text($(i).closest("tr").index(".foo"))
})

table {
  border-collapse: collapse;
  float: left;
  margin: 2px;
}

th,
td {
  border: thin solid lightgrey;
  height: 15px;
  padding: 5px;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>

<body>
  <table>
    <tr>
      <th>TABLE</th>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
  </table>
  <table>
    <tr>
      <th>TABLE</th>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
  </table>
  <table>
    <tr>
      <th>TABLE</th>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
  </table>
</body>

</html>

CodePudding user response：

Call .index() on a collection of all the .foo within the current table, passing the current row as the argument. This returns its index within that collection.

document.querySelectorAll("td").forEach(i => {
  let row = $(i).closest("tr");
  $(i).text(row.closest("table").find(".foo").index(row));
})

table {
  border-collapse: collapse;
  float: left;
  margin: 2px;
}

th,
td {
  border: thin solid lightgrey;
  height: 15px;
  padding: 5px;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>

<body>
  <table>
    <tr>
      <th>TABLE</th>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
  </table>
  <table>
    <tr>
      <th>TABLE</th>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
  </table>
  <table>
    <tr>
      <th>TABLE</th>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
  </table>
</body>

</html>

CodePudding user response：

I would do it using jquery .. I have commented on the code and it should be more than understandable! :)

$(function(){
    $('table').each(function(){ // find all table
        if($(this).find('.foo').length > 0){  // check if the foo class is present 
            var counter = 0;
            $(this).find('.foo td').each(function(){ // Count and number cells 
                $(this).text(counter);
                counter  ;
            })
        }
    })
})

table {
  border-collapse: collapse;
  float: left;
  margin: 2px;
}

th,
td {
  border: thin solid lightgrey;
  height: 15px;
  padding: 5px;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>

<body>
  <table>
    <tr>
      <th>TABLE</th>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
  </table>
  <table>
    <tr>
      <th>TABLE</th>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
  </table>
  <table>
    <tr>
      <th>TABLE</th>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
  </table>
</body>

</html>