Index of elements, jQuery or Javascript

Question

I've a table that contains 3 columns. I need to bind an event that fires off whenever one of those columns is clicked using jQuery.

However, I need to know the index of the column clicked.

i.e: First column (index 0), Second column (index 1), Third column (index 2), and so on...

How can I do that?

var firstRow:

var firstRow = $("tr:first > th", "table[id*=Grid]");

Take a look:

firstrow.click(function(e){
//var id = e.target.index;
var id = $(e).parent().children().index(this);//returns -1
})

Answer 1

You can do this using .index() (it's 0 based), like this:

$("td").click(function() {
  var i = $(this).parent().children().index(this);
  alert(i);
});

Answer 2

it might be a better idea to use native javascripts .rowIndex instead of jQuerys .index. jQuery might have some trouble in detecting table head (TH) elements.

Kind Regards

--Andy

Answer 3

I always liked using .prevAll()

$('table').click(function(e) {
  var $targ = $(e.target);
  if ($targ.is('th')) {
    var position = $targ.prevAll().length;
    alert(position);
  }
});

Preview on jsbin