I have four tables on a page and I want to target the index of table cells in each separately, with the TABLE as the parent, not the ROW. This code returns the index within each row.

So I want to find the first three TDs with a class of "events" in each table.

$('.section .calendar').each(function(){
 $(this).find('td.events').each(function(){
      ind= $(this).index()
      ind <= 2 ? $(this).css('background','#f90') : $(this).css('background','#000');

     })
  })

If I try:

ind= $('.calendar td.events').index(this)

it targets a cells' index within all four tables as the parent

ind= $(this).index()

targets the cells' index within each row(of all four tables) as its parent

The tables' structures are the usual valid :

<table class="calendar">
 <tr>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
</tr>
<tbody>
<tr>
 <td></td>
 <td class="events"></td>
 <td></td>
 <td class="events"></td>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td class="events"></td>
 <td></td>
 <td></td>
 <td></td>
 <td class="events"></td>
 <td></td>
</tr>

(...etc)

• three more identical tables

You can try something like this. Its basically calculating the number of TDs before the current one.

function getTDIndex($td) {
    var index1 = $td.prevAll("td").length;
    var index2 = $td.closest("tr").prevAll("tr").find("td").length;

    var index = index1 + index2;
};

more