jQuery closest（）;動作していません

Question

テキスト入力がフォーカスされているときにテキストを表示させようとしていますが、closest（）;メソッドが機能していないようです。

私はJS Fiddleをご覧になりました。

ここにもコードがあります。

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> 

任意の助けいただければ幸いです。

Answer 1

.closest().validation-errorは、name-input要素の親ではありません。あなたはアルンP.ジョニーの答えははるかに良いですが、私のバージョンDemo Fiddleをお試しください

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

または

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

Answer 2

が必要

入力要素と同じtrの下に来る.validation-error要素を必要としています。

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