类没有得到重点消除-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>

为什么我的班级没有集中注意力？

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)

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

---

问题

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

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9mQ1lrYS5wbmcifQ==” alt =“在此处输入图像描述”>

解决方案>>

[$("input.fee").closest("div.mainWrapper")获得祖先

元素div.mainWrapper，然后找到元素div.FirstLayer