web-dev-qa-db-ja.com

jQuery nearest（）;働いていない

テキスト入力がフォーカスされているときにテキストを表示しようとしていますが、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>

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

jquerytraversalclosest
15
Ollie2619

。closest（） は、最も近い親要素を見つけます。.validation-errorは、name-input要素の親ではありません。入力要素と同じtrの下にある.validation-error要素が必要です

あなたが必要

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

または

$(this).closest('td').next().find('.validation-error').show();
55
Arun P Johny

私のバージョンを試してください デモフィドル Arun P. Johnyの答えははるかに優れていますが..

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