jquery: ordinal of td inside tr

Question

I have a row in an html-table that contains only images. (this happens to be the first row too). Those images are wired for a click event too. While trying to handle the click event I can find out its parent (i.e. <td> element). But I want to know its relative ordinal in the table row (<tr>).

Answer 1

A call to .closest() within your click event handler might help you.

$(this).closest('tr');

Reference: .closest()

Answer 2

You can find the ordinal with the index() function:

$('td img').click(function() {
   var ordinal = $(this).closest('tr').children().index($(this).parent());
   // ...
});

Answer 3

The number of elements before the current element will be its index in the DOM relative to the parent. You can use .prevAll() and get the length of the resulting set:

$('td').click(function(){
  alert($(this).prevAll().length);
});

Demo available on jsfiddle