jQuery get each <img> element within specific column of the table

Question

My table is like this:

<table>
    <tr>
       <td>
           <img src="" />
           <span>blah</span>
       </td>
    </tr>
    ...

So in each row, first column contains an image. I need to register event on each of this image. So how can I select it?

I tried this:

td:eq(0):nth-child(0)

But it is not working.

Answer 1

something like this selector:

td:first-child > img

should work i guess...

Answer 2

For nth-child selector, the index is 1 based. I think something like this would work for you:

$("td:nth-child(1) > img")

or even simpler:

$("td:first-child > img")

Answer 3

I'd suggest:

$('table tr td:first-child img').on('event', function (){
    // handle the event here
});

Answer 4

Seeing as you want to attach an event to the image, instead of iterating to each image, you could bind the event handler like this:

$("table").on("eventname", "td:first-child img", function(i){
 //your code
});

Demo : http://jsfiddle.net/hungerpain/PYFhw/

Answer 5

我认为http://forum.jquery.com/topic/jquery-how-to-select-all-first-tds-inside-all-tr-in-a-table包含几种解决方案：

$('tr td:first-child')

$('tr').find('td:eq(0)')

$("tr td:nth-child(1)")

Answer 6

$('table > tr > td:first-child > img').bind('click', function() {
   // your code
});

I would give the table a unique id for more precision.

$('#table_id > tr > td:first-child > img').bind('click', function() {
   // your code
});

Replace 'click' in the code above with wathever event you need to check.

Answer 7

您可以选择表的第一列图像，如下所示：

$('tr').find('td:eq(0)')

Answer 8

Check this

$(function(){
$("table tr td:first-child").on("click","img",function(){
    console.log("hey");
});
});