get the jquery index of "td" element

Question

I have markup

 <table>
    <tr id="1">
        <td colspan="4">
            <p class="que">
                1. Who are you?</p>
        </td>
    </tr>
    <tr class="ans">
        <td>
            <input type="checkbox" />Student
        </td>
        <td>
            <input type="checkbox" checked="true" />Developer
        </td>
        <td>
            <input type="checkbox" />Other
        </td>
        <td>
            <input type="text" />
        </td>
    </tr>

</table>​​​

Here I want to get the index of the particular td which has its checkbox checked. For example here it should be 1. But I m getting 0 eachtime which seems like the index of the row. Here is the jquery code I have used.

   var answers = $('table tr.ans');
 $.each(answers, function () {
  var answer = $(this).find("input[type='checkbox']:checked").index(); 
    alert(answer);                   
  });​

and here is the fiddle How do I get the index of the particular td? Thanks

Answer 1

You can do it with

$("table tr.ans input[type='checkbox']:checked").parent().index();

You simply need to navigate from the checkbox back up to the <td>, at which point stright calling .index does the trick:

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

See it in action.

Since you are doing this inside a loop, a more proper fit would be

var answer = $(this).find("input[type='checkbox']:checked").parent().index();

Answer 2

Change the line to this:

var answer = $(this).find("input[type='checkbox']:checked").parent().index(); 

This will give you the index of the td that is the parent of the input you have selected in your jquery selector.