jQuery select value inside neighbourhood TD

I want to get value inside span with id 'Target开发者_如何转开发Span' when user clicks on Input with ID of 'test'

I tried this code but it returns null.

$('.PrintReport').click(function (e) {
            alert($(this).parent().find('td:eq(2)').html());

        });

<tr>
<td>
</td>
<td>
</td>
<td>
<span id="TargetSpan" class="Price">0</span>
</td>
<td>
</td>
<td>
<input id=test type="image"  class="PrintReport" >
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<span id="TargetSpan2" class="Price">0</span>
</td>
<td>
</td>
<td>
<input id=test2 type="image"  class="PrintReport" >
</td>
</tr>

I guess this is what you are looking for and of course this solution relative to your HTML mark-up and might not work if you change your mark-up.

$('.PrintReport').click(function() {
  alert($(this).parent().prev().prev().find('.Price').html());
});

this is another solution but you have to give every TargetSpan and Test id's with a number suffix like TargetSpan1, TargetSpan2, test1, test2

$('.PrintReport').click(function() {
  var id = this.id.replace('test', '');
  alert($(this).closest('tr').find('TargetSpan' + id).html());
});

.parent() will return the parent td; try parent().parent() or .closest("tr")

Why don't you just select it by the id?

$('#TargetSpan').html()

If you continue to use the id conventions in your example, this will ALWAYS work, regardless of td order.

$('.PrintReport').click(function (e) {
    alert($('#TargetSpan' + $(this).attr('id').replace(/\D/g,'')).html());
});