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

Question

$("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>

为什么我的类(class)没有被移除焦点？

Answer 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)

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

---

问题

$("input.fee") 没有 ancestors 元素 div.FirstLayer，如下图所示。

解决方案

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