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>

任何帮助将不胜感激。

- Ollie2619

---

closest 正在遍历父元素。 - Balint Bako

检查文档怎么样？http://api.jquery.com/closest/ - A. Wolff

closest() 方法在 IE / Edge 中不起作用。请参见 http://caniuse.com/#feat=element-closest 以了解支持该方法的浏览器。 - Yvonne Aburrow

Answer 1

.closest() 查找最近的父元素，.validation-error 不是 name-input 元素的父元素。你需要在与输入元素相同的 tr 下的 .validation-error 元素。

你需要

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

或者

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

- Arun P Johny

---

我正在使用Firefox v33.0。这个版本是否支持closest函数？ - Muthu

Answer 2

尝试我的版本演示 Fiddle，尽管 Arun P. Johny 的答案更好。

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

- Olrac