2013-07-04 19 views
12

Sto provando a fare un po 'di testo mostrare quando un input di testo è a fuoco, ma il più vicino(); il metodo non sembra funzionare.jQuery closest(); non funziona

Ho fatto un JS Fiddle per voi da guardare.

ed ecco anche il codice.

JS

$(document).ready(function(){ 
    $('.validation-error').hide(); 
    $('.name-input').on("focus", function(){ 
    $(this).closest('.validation-error').show(); 
    }); 
}); 

HTML

<fieldset> 
<legend>User Details</legend> 
    <table> 
    <tr> 
    <td width="200"> 
    <label for="user"><span class="required-fields">*</span> User  Name</label> 
    </td> 
    <td> 
    <input type="text" id="user" class="name-input"> 
    </td> 
    <td> 
    <p class="validation-error">This field cannot be blank or less than 2 characters.</p> 
    </td> 
</tr> 
<tr> 
    <td> 
    <label for="job_title"><span class="required-fields">*</span> Job Title</label></td> 
    <td> 
    <input type="text" id="job_title" class="name-input"> 
    </td> 
    <td> 
    <p class="validation-error">This field cannot be blank or less than 2 characters.</p> 
    </td> 
</tr> 
<tr> 
    <td> 
    <label for="full_name">* Full Name</label> 
    </td> 
    <td> 
    <input type="text" id="full_name" class="name-input"> 
    </td> 
    <td> 
    <p class="validation-error">This field cannot be blank or less than 2 characters.</p> 
    </td> 
</tr> 
</table> 
</fieldset> 

Qualsiasi aiuto sarebbe apprezzato.

+2

"più vicino" sta attraversando il ents –

+0

E il controllo del documento? http://api.jquery.com/closest/ –

+0

Il metodo 'closest()' non funziona in IE/Edge. Vedi http://caniuse.com/#feat=element-closest per i browser supportati. –

risposta

48

.closest() trova l'elemento padre più vicino, .validation-error non è un elemento principale dell'elemento name-input. È necessario l'elemento .validation-error, che fa parte dello stesso tr come elemento di input

È necessario

$(this).closest('tr').find('.validation-error').show(); 

o

$(this).closest('td').next().find('.validation-error').show(); 
+0

Grazie mille !! – Ollie2619

+0

Sto usando firefox v33.0. Se il più vicino è supportato in questa versione – Muthu

2

provare la mia versione Demo Fiddle anche se la risposta di Arun P. Johny è molto meglio.

$(this).parent().siblings().find('.validation-error').show();