Question

I have the following mark-up:

<table>
<thead>
...
</thead>
<tbody>
<tr>
    <td>
      <span class='select_me' id='42'></span>
    </td>
     <td>
      <span class='select_me' id='43'></span>
     </td>
  </tr>
 <tr>
    <td>
      <span class='select_me' id='50'></span>
    </td>
     <td>
      <span class='select_me' id='54'></span>
     </td>
  </tr>
</table>

How would I go about selecting the 2nd or 1st span ‘select_me’ in each row?
I figure it’s something like this – I want to get the id

$("td").each(function(){
v = $(this).children(".select_me:first").attr("id");
});

but it outputs ‘undefined’, any help would be appreciated

Answer 1

You can use the :eq selector:

$("tr").each(function() {
    var firstId = $("span.select_me:eq(0)", this).attr("id");
    var secondId = $("span.select_me:eq(1)", this).attr("id");
});

Since you only have two <span> elements per row, you can also use the :first and :last selectors:

$("tr").each(function() {
    var firstId = $("span.select_me:first", this).attr("id");
    var secondId = $("span.select_me:last", this).attr("id");
});