Return value of next span

I'm trying to return the value of the next/closet span with a certain class ID. I am super close but I am confused how to 开发者_StackOverflow社区use next() and closest() any help would be awesome

HTML:

    <table width="80%" cellspacing="0" cellpadding="0" >
  <th scope="col">Data</th>
       <tr>
         <td width="20%"><a href="#" class ="show_data_link">Show Data</a>
           <span class="data">1 </span>  
          </td>
      </tr>
           <tr>
         <td width="20%"><a href="#" class ="show_data_link">Show Data</a>
           <span class="data">2 </span>  
          </td>
      </tr>
           <tr>
         <td width="20%"><a href="#" class ="show_data_link">Show Data</a>
           <span class="data">3 </span>  
          </td>
      </tr>
 </table>

JAVASCRIPT

$('.show_data_link').bind('click', function(){
//returns the first class
alert($('.data').html());
//returns null
//alert($('.data').next().html());
//returns null
// alert($('.data').closest().html());
  return false;
});

If I use $('.data').html() i can get the value of the first span just not sure how to get the value of the span that is the closet so the link clicked JSFiddle

you can use alert($(this).next().html()); like this

when you're using $('.data') it gets all the elements with class="data" no matter witch one you've clicked