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

Question

I have a div like this:

<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，然后通过closest方法获取其父级（相应的popupDiv）的id，然后调用disablePopup。

但这不起作用。

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

我还尝试了var id = this.id; 非常感谢任何帮助。

谢谢

- Y2theZ

---

buttonID将包含字符串"popupDivClose"。如果您将其传递给jQuery，它将搜索所有标记名称为popupDivClose的元素。ID选择器以#开头。但是，由于event.target（甚至是this）已经指向您想要的元素，因此只需使用$(event.target).closest(...)...或$(this).closest(...)...即可。我建议阅读更多jQuery教程... - Felix Kling

Answer 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 值。

这里是一个工作示例

- musefan

Answer 2

你应该这样做

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

（你也可以使用$(this).parent().attr("id");）但是使用closest更安全，以防您更改HTML结构

- Nicola Peluchetti

---

请注意，parent() 只会返回直接父级元素，因此选择器参数是无意义的。但是，您可以使用 parents(selector)，它将接受一个选择器并返回与选择器匹配的所有父级元素（一直到树的顶部）。 - musefan

@musefan 是的，这是毫无意义的。根据我的经验，最好使用closest()，因为你通常会修改你的HTML并破坏使用parent()的代码。 - Nicola Peluchetti

一个很好的观点，值得考虑。然而，我还没有以这种方式破坏过我的代码...不过，反正我也不经常使用这种功能。 - musefan

Answer 3

这个很好用：

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

JSFiddle演示

你应该只使用this而不是获取ID并尝试将其用作选择器的方式（你忘记在ID前加上#）：

- Richard Dalton

Answer 4

这个必须能够工作：

$(".popupCloseClass").click(function (event) 
{
    var buttonID = $(this).parent().attr('id');
    disablePopup(buttonID);
});

- pascalvgemert