类没有被删除焦点 - jQuery

Question

HTML代码

<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

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

CSS

.removeClass {
    background-color: red;
}

以下是小提琴 http://jsfiddle.net/YZ6vg/3/

为什么我的课程没有被焦点移除？。

Answer 1

您的选择器错误

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

<强> Working Demo

<小时/> .closest(selector)

  

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

<小时/> 的问题

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

<强>解决方案

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