How to select a div in a table cell using jQuery
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 for is when the # ctl00_bodyContent_username text field has focus, te div.message is displayed (default is display: none) in the adjacent table cell.
source to share
Assuming there is more than one of these (and not just one as the others assume):
$("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 that you want to hide the message when the field loses focus.
source to share
$("#ctl00_bodyContent_username").focus(function(){
$(".message").show();
})
Let me give you some quick information about the Show () method :
Same as show (speed, [callback]) without animation. Changes nothing if the selected items are all visible. It doesn't matter if the element is hidden when you call hide () or through display: none in your stylesheet.
By: JQuery Effects
source to share
Try the following:
$("#ctl00_bodyContent_username").focus(function(){
$(this).parent().next().children('.message').show();
})
Where
parental
Get the direct parent. If called on a set of elements, the parent returns the set of its unique direct parent elements.
next
Get a sibling set containing the following siblings unique to each of the given sibling set.
children
Get a stencil that contains all of the unique immediate children of each of the matched stencil.
show
Displays each of a set of matched items, if hidden.
See traversing in the jQuery docs for details .
source to share