时间戳

首页 > 解决方案 > 选择一个 div，如果您单击该 div，或者一个子元素

jquery - 选择一个 div，如果您单击该 div，或者一个子元素

问题描述

当我使用 . 单击子元素时，我试图选择一个父类event.target。我div通过查看它有什么类来检查它是否是 ，如果它不是div，我div会从子元素中找到它，但它似乎不起作用，而且它不会hide()。

$(document).click(function(e){
    elem_id = $('#'+e.target.id);
    if(!elem_id.hasClass('mail_schedule_dropdown')) elem_id = $('#'+e.target.id).find('.mail_schedule_dropdown');
    elem_id.hide();
});

<div id="parent" class="mail_schedule_dropdown"><span>child</span></div>

如果单击，如何选择父元素div？这不起作用：

elem_id = $('#'+e.target.id).find('.mail_schedule_dropdown');

为什么那行不通？

标签： jqueryelement

解决方案

你只是在寻找错误的方向。来自jQuery 文档.find()：

获取当前匹配元素集中每个元素的后代，由选择器、jQuery 对象或元素过滤。

在您的代码中，如果单击的元素没有您的类，则您正在搜索其后代以查找父级。但实际上在那种情况下它必须是被点击的孩子，所以你需要搜索它的祖先。

有几种方法可以做到这一点，但.closest()可能是最合适的：

elem_id = $('#'+e.target.id).closest('.mail_schedule_dropdown');

边注

代码中的变量名让我有点吃惊。 elem_id根本不是 ID，它是代表元素的实际 jQuery 对象。这似乎微不足道，但是当将 ID 用作字符串、元素和选择器时，一旦你的代码变得更复杂，就足以导致错误 - 至少它发生在我身上！这是我为清晰度而调整的版本：

$(document).click(function(e){
    // Using '$' makes it clear that this represents a jQuery object;
    // The variable name makes it clear exactly what it is
    var $clicked = $('#'+e.target.id);
    if (!$clicked.hasClass('mail_schedule_dropdown')) {
        $clicked = $clicked.find('.mail_schedule_dropdown');
    }
    $clicked.hide();
});

推荐阅读