[jquery] jQuery selector first td of each row

I have this stuff:

<table>
  <tr>
    <td>nonono</td> <!-- FIND THIS -->
    </td>foobar</td>
  </tr>
  <tr>
    <td>nonono2</td> <!-- FIND THIS -->
    </td>foobar2</td>
  </tr>
  <tr>
    <td>nonono3</td> <!-- FIND THIS -->
    </td>foobar2</td>
  </tr>
</table>

I have tried with $('td:first') with no luck;

Expected return: <td>nonono</td>, <td>nonon2</td> and <td>nonon3</td>

Thanks in advance!

$('td:first-child') will return a collection of the elements that you want.

var text = $('td:first-child').map(function() {
  return $(this).html();
}).get();

var tablefirstcolumn=$("tr").find("td:first")
alert(tablefirstcolumn+"of Each row")

try this selector -

$("tr").find("td:first")

Demo --> http://jsfiddle.net/66HbV/

Or

$("tr td:first-child")

Demo --> http://jsfiddle.net/66HbV/1/

</td>foobar</td> should be <td>foobar</td>

Use:

$("tr").find("td:first");

js fiddle - this example has .text() on the end to show that it is returning the elements.

Alternatively, you can use:

$("td:first-child");

.find() - jQuery API Documentation

try

var children = null;
$('tr').each(function(){
    var td = $(this).children('td:first');
    if(children == null)
        children = td;
    else
        children.add(td);
});

// children should now hold all the first td elements

You can do it like this

$(function(){_x000D_
  $("tr").find("td:eq(0)").css("color","red");_x000D_
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<table>_x000D_
  <tr>_x000D_
    <td>col_1</td>_x000D_
    <td>col_2</td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td>col_1</td>_x000D_
    <td>col_2</td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td>col_1</td>_x000D_
    <td>col_2</td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td>col_1</td>_x000D_
    <td>col_2</td>_x000D_
  </tr>_x000D_
</table>