在 JQuery 事件中查找父元素

Question

我已添加如下的点击事件，并想检查目标是否有特定的父元素。

$(document).click(function(event){
    // Check here if target has specific parent for example -> #parent
});

如何完成这个任务？

- ihkawiss

---

你想检查文档是否有父元素？为什么要将点击事件绑定到文档上？你究竟想做什么？ - wirey00

你是指“父级”还是“祖先”？ - Pointy

我有一个日期选择器，应该在你点击别的地方后隐藏。 - ihkawiss

事件的this不是字面上的DOM元素（而不是jquery对象）吗？ $(document).click(function(event){ console.log( $(this.parentNode) ); }); - That Realty Programmer Guy

Answer 1

这里有一个名为.parent()的dom遍历方法可以用于此类问题。

根据Pointy的预测，您可能想要像这样做：

$(document).click(function(event) {
  if ($(event.target).parents('.selector').length > 0) {
  }
});

我不确定为什么你在文档上设置了点击处理程序，也许是在寻找事件委托和.on()方法？

- complex857

---

我认为你可能需要使用.parents(selector)或.closest(selector)方法，并检查jQuery对象的长度是否大于0。如果问题是关于直接父级，则是这样的。 - Pointy

@Pointy 是的。使用 $(event.target).parents(selector).length。 - adu

使用 $(event.target).parents(selector).length 完美解决了问题，正是我所需要的！非常感谢！ - ihkawiss

Answer 2

我相信这种方法也可以奏效。据我所知，当调用事件时，jQuery事件使用字面元素而不是jQuery对象。基本上，this应该是您的普通DOM元素，具有普通的JavaScript属性。

$(document).click(function(event)
{
   let myparent = $(this.parentNode); //jquery obj
   let parent = $(this.parentNode)[0]; //plain DOM obj

   let myself = $(this); //jquery obj;
   let $elf = this; //plain DOM obj
});

注意：有时使用“self”作为变量是不好的/会与某些库发生冲突，因此我使用了$elf。$elf中的$符号不是特殊字符；它不是jQuery约定或类似的东西。

- That Realty Programmer Guy

Answer 3

$(document).click(function(event){
    var $parent = $(this).parent();

     // test parent examples 
    if($parent.hasClass('someclass')) { // do something }

    if($parent.prop('id') == 'someid')) { // do something }

    // or checking if this is a decendant of any parent

    var $closest = $(this).closest('someclass');

    if($closest.length > 0 ) { // do something }

    $closest = $(this).closest('#someid'); 

    if($closest.length > 0 ) { // do something }
});

- Gabe

---

我认为你也可以向 .parent() 传递一个选择器，这将给你一个 jQuery 结果，其中包含零个或一个元素。 - Pointy

你说得没错，你可以这样做。我只是想提供一些选择，对的，那也是一个选择。 - Gabe

Answer 4

我过去可靠地使用过这个：

var target = $( event.target )

这将为您提供有事件调用的元素的jQuery对象的引用。您可以使用相同的方法，看看父元素是否是“#parent”，像这样：

var target = $( event.target )
if (target.parent().attr('id') == "#parent") {
    //do something
}

- Andrew Trice