Comment sélectionner div dans la cellule de table en utilisant jQuery

Question

je la structure de tableau suivant:

  <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> 

Ce que je cherche à atteindre est quand la zone de texte # ctl00_bodyContent_username a le focus, te div .message est affiché (par défaut est display: none) dans la cellule de tableau adjacente.

Answer 1

hypothèse où il y a plus d'un d'entre eux (et pas seulement un comme l'autre partons du principe):

$("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(); 
}); 

Cela suppose également que vous voulez cacher le message lorsque le le champ perd son focus.

Answer 2

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

Permettez-moi de vous donner une brève information sur Show() Méthode:

Comme show (vitesse, [rappel]) sans animations. Ne change rien si les éléments sélectionnés sont tous visibles. Peu importe si l'élément est masqué via un appel hide() ou via un affichage: none dans une feuille de style.

De: JQuery Effects

Answer 3

Essayez ceci:

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

où

parent

Obtenez le parent direct d'un élément. S'il est appelé sur un ensemble d'éléments, parent renvoie un ensemble de leurs éléments parent directs uniques.

suivant

Obtenez un ensemble d'éléments contenant les frères et sœurs uniques de chacun des prochains l'ensemble donné d'éléments.

enfants

obtenir un ensemble d'éléments contenant tous les enfants immédiats uniques de chacun de l'ensemble assorti d'éléments.

montrent

Affiche chacun l'ensemble des éléments adaptés si elles sont cachées.

Voir traversing dans les documents jQuery pour plus d'informations.