title: jquery selector - selecting the 2nd span child inside each table row
body: <p>I have the following mark-up:</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
  ...
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
      &lt;td&gt;
        &lt;span class='select_me' id='42'&gt;&lt;/span&gt;
      &lt;/td&gt;
       &lt;td&gt;
        &lt;span class='select_me' id='43'&gt;&lt;/span&gt;
       &lt;/td&gt;
    &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td&gt;
        &lt;span class='select_me' id='50'&gt;&lt;/span&gt;
      &lt;/td&gt;
       &lt;td&gt;
        &lt;span class='select_me' id='54'&gt;&lt;/span&gt;
       &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>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</p>
  
  <pre><code>$("td").each(function(){
  v = $(this).children(".select_me:first").attr("id");
  });
  </code></pre>
  
  <p>but it outputs 'undefined', any help would be appreciated</p>