Search code examples
jquerydom-traversaljquery-traversing

Getting undefined as the value for span tag while traversing a table

I need to reach the the span tag with class = ustatus and have the jQuery object obtained for id = foo.

<tr>
  <td> <input name = 'user' type='radio 'id='foo'/> </td>
  <td> <input id='boo'/> </td>
  <td> <input id='too'/> </td>
  <td> <input id='yoo'/> </td>
  <td> <span class='ustatus'> Active </span> </td>
</tr>

I was trying like:

$("input[name = 'user']:checked").closest('td').find('.ustatus').first().val()

but get undefined as the value. Where did I make a mistake?

Solution

  • Few Issues in your code:

    1) You need to traverse to tr instead of td. as span lies in one of the sibling td of selected radio buttons parent td

    2) span element have text/html property associated to it and not value.you need to use .text()/.html() instead of .val()

    3) as there is only one ustatus element in tr, you do not need .first() selector.

    $("input[name='user']:checked").closest('tr').find('.ustatus').text()