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