类没有在焦点上被删除 - jQuery答案

【问题标题】：class not getting removed on focus - jQuery类没有在焦点上被删除 - jQuery
【发布时间】：2014-04-23 12:33:19
【问题描述】：

$("input.fee").focus(function() {
  $(this).closest("div.FirstLayer").removeClass("removeClass");
});

.removeClass {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainWrapper">
  <div class="FirstLayer removeClass">
    <input class="foo" value="fooX" />
  </div>
  <div class="SecondLayer">
    <div class="thirdLayer">
      <input class="fee" />
    </div>
  </div>
</div>

为什么我的课程没有被删除？

【问题讨论】：

标签： jquery css jquery-selectors

【解决方案1】：

您的选择器错误

$("input.fee").focus(function(){
    $(this).closest("div.mainWrapper").find("div.FirstLayer").removeClass("removeClass");  
});

工作演示：

$("input.fee").focus(function() {
  $(this).closest("div.mainWrapper").find("div.FirstLayer").removeClass("removeClass");
});

.removeClass {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainWrapper">
  <div class="FirstLayer removeClass"><input class="foo" value="fooX" /></div>

  <div class="SecondLayer">
    <div class="thirdLayer">
      <input class="fee" />
    </div>
  </div>
</div>

.closest(selector)

说明：对于集合中的每个元素，通过测试元素本身并在 DOM 树中向上遍历其ancestors，获取与选择器匹配的第一个元素。

问题

$("input.fee") 没有 ancestors 元素 div.FirstLayer 见下图。

解决方案

$("input.fee").closest("div.mainWrapper") 得到 ancestors 元素 div.mainWrapper 然后找到元素 div.FirstLayer

【讨论】：

@EhsanSajjad：因为 input.fee 没有 div.FirstLayer 作为任何父级。
@MilindAnantwar ty 获取演示链接。