JQuery：获取被点击元素的父元素id

Posted 2023-05-08

【中文标题】JQuery：获取被点击元素的父元素id

【英文标题】：JQuery: Get the parent element id of a clicked element

【发布时间】：2012-04-12 21:39:31

【问题描述】：

我有一个这样的 div：

<div id="popupDiv1" class="popupDivClass">
    <a id="popupDivClose" class="popupCloseClass">x</a>
</div>

当我点击“x”时（我想运行一个名为 disablePopup(id); 的 jquery 函数，其中 id 是对应的 popupDiv 的 id（我有很多 popupDiv，每个都有自己的 X 按钮。

为了做到这一点，我实现了以下

$(".popupCloseClass").click(function (event) 
    var buttonID = $(event.target).attr("id");
    var id = $( buttonID).closest("div").attr("id");
disablePopup(id);
);

基本上我得到了 popupCloseClass 点击的 id，然后我通过最接近的方法得到了它的父级（相应的 popupDiv）的 id。然后我调用 disablePopup。

但这不起作用。

我什至尝试使用var buttonID = $(buttonID).parent().attr("id"); 方法，但也没有用。

我也试过var id = this.id;

非常感谢任何帮助

谢谢

【问题讨论】：

buttonID 将包含字符串 "popupDivClose"。如果你将它传递给 jQuery，它将搜索所有带有 tag name popupDivClose 的元素。 ID 选择器以# 开头。但由于event.target（甚至this）已经指向你想要的元素，只需使用$(event.target).closest(...)... 或$(this).closest(...)...。我建议阅读更多 jQuery 教程...

【参考方案1】：

您可以像这样使用parent，而不是使用closest...

var id = $(this).parent().attr("id");

请注意，您可以使用 this 关键字来引用启动事件的元素。正如您所拥有的那样，您使用 buttonID 的值作为元素选择器，其值为 "popupDivClose" 并且在开始时不添加 # 它不会搜索 ID，而是搜索标签元素称为“popupDivClose”。

如果你想继续使用 buttonID，你可以使用这行代码来让它工作......

var id = $("#" + buttonID).parent().attr("id");

但是，我更愿意像这样写整个事件......

$(".popupCloseClass").click(function (event) 
    event.preventDefault();

    var id = $(this).parent().attr("id");

    disablePopup(id);
);

注意event.preventDefault(); 的使用，这将确保浏览器不会处理链接点击的自然动作（即页面导航） - 不过，至少在 Chrome 中，无论如何您都需要为导航指定 href 值

Here is a working example

【参考方案2】：

这必须有效：

$(".popupCloseClass").click(function (event) 

    var buttonID = $(this).parent().attr('id');
    disablePopup(buttonID);
);

【参考方案3】：

你应该这样做

$(".popupCloseClass").click(function (event) 
    var id = $(this).closest("div").attr("id");
);

（您也可以使用 $(this).parent().attr("id"); ）但是如果您更改 html 结构，使用最接近的会更安全

【讨论】：

请注意，parent() 只会返回直接父级，因此选择器参数毫无意义。但是，您可以使用parents(selector)，它将采用选择器并返回与选择器匹配的所有父级（一直向上）

@musefan 是的，这毫无意义，根据我的经验，最好使用最接近（），因为您通常最终会修改 html 并破坏使用 parent() 的代码

一个很好的观点，绝对值得考虑。但是，我还没有以这种方式破坏我的代码......再说一次，我不会经常使用这种功能

【参考方案4】：

这很好用：

$('a.popupCloseClass').click(function() 
    var id = $(this).parent().attr('id');
);​

JSFiddle Demo

您应该只使用 this 而不是获取 ID 然后尝试将其用作选择器的方式（您在 ID 之前缺少 #）：