2013-07-04 21 views
12

Ich versuche zu tun, einige Text zeigen, wenn eine Texteingabe im Fokus ist, aber die nächste(); Methode scheint nicht zu funktionieren.jQuery am nächsten(); funktioniert nicht

Ich habe eine JS Fiddle für Sie zum Betrachten gemacht.

und hier ist der Code auch.

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> 

Jede Hilfe würde geschätzt.

+2

'closest' die par ents –

+0

Wie sieht es mit dem Überprüfen des Dokuments aus? http://api.jquery.com/closest/ –

+0

Die Methode 'nearest()' funktioniert nicht in IE/Edge. Siehe http://caniuse.com/#feat=element-closet für unterstützte Browser. –

Antwort

48

.closest() findet das nächste übergeordnete Element, .validation-error ist kein übergeordnetes Element des Elements name-input. Sie müssen das .validation-error Element, das unter dem gleichen tr als Eingangselement kommt

Sie benötigen

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

oder

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

Vielen Dank !! – Ollie2619

+0

Ich benutze Firefox v33.0. Ob am nächsten kommt, wird in dieser Version unterstützt – Muthu

2

Versuchen Sie, meine Version Demo Fiddle obwohl Arun P. Johny Antwort viel besser ist. .

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