How to select div in table cell using jQuery

Question

I have the following table structure;

            <tr>
                <th><label for="ctl00_bodyContent_username">username:</label></th>
                <td class="field"><input name="ctl00$bodyContent$username" type="text" id="ctl00_bodyContent_username" /></td>
                <td class="info">
                    <div class="message">what do you want to be known as?</div>
                    <div class="valid">username available</div>
                    <div class="invalid">this username is already taken</div>
                </td>
            </tr>

What I'm looking to achieve is when the textbox #ctl00_bodyContent_username has focus, te div .message is shown (default is display:none) in the adjacent table cell.

Answer 1

$("#ctl00_bodyContent_username").focus(function(){
  $(".message").show();
})

Let me give you a brief information about Show() method :

Same as show( speed, [callback] ) without animations. Doesn't change anything if the selected elements are all visible. It doesn't matter if the element is hidden via a hide() call, or via a display:none in a stylesheet.

From : JQuery Effects

Answer 2

Assuming there are more than one of these (and not just one as the other are assuming):

$("td.field :input").focus(function() {
  var info = $(this).parent().next();
  if ($(".valid:visible, .invalid:visible", info).length == 0) {
    info.children("message").show();
  }
}).blur(function() {
  var info = $(this).parent().next();
  info.children("message").hide();
});

This also assumes you want to hide the message when the field loses focus.

Answer 3

Try this:

$("#ctl00_bodyContent_username").focus(function(){
  $(this).parent().next().children('.message').show();
})

where

parent

Get the direct parent of an element. If called on a set of elements, parent returns a set of their unique direct parent elements.

next

Get a set of elements containing the unique next siblings of each of the given set of elements.

children

Get a set of elements containing all of the unique immediate children of each of the matched set of elements.

show

Displays each of the set of matched elements if they are hidden.

See traversing in jQuery docs for more information.