获取元素的父div

这应该很简单，但我遇到了麻烦。我如何得到一个子元素的父div ?

我的HTML:

<div id="test">
    <p id="myParagraph">Testing</p>
</div>

我的JavaScript:

var pDoc = document.getElementById("myParagraph");
var parentDiv = ??????????

我认为是文件。父母或父母。容器将工作，但我一直得到未定义的错误。注意，pDoc是定义的，而不是它的某些变量。

什么好主意吗?

注:如果可能的话，我倾向于避免使用jQuery。

当前回答

var parentDiv = pDoc.parentElement

编辑:在某些情况下有时是parentNode。

https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement

2016-08-16 21:02:37

其他回答

当您试图在元素的“实际流”中定位元素时，了解元素的父元素非常有用。

下面给出的代码将输出提供id的元素的父元素的id。可用于错位诊断。

<!-- Patch of code to find parent -->
<p id="demo">Click the button </p>
<button onclick="parentFinder()">Find Parent</button>
<script>
function parentFinder()
{
    var x=document.getElementById("demo"); 
    var y=document.getElementById("*id of Element you want to know parent of*");
    x.innerHTML=y.parentNode.id;
}
</script>
<!-- Patch ends -->

2014-08-23 07:40:06

我最近不得不做一些类似的事情，我使用了这个片段:

const getNode = () =>
  for (let el = this.$el; el && el.parentNode; el = el.parentNode){
    if (/* insert your condition here */) return el;
  }
  return null
})

函数将返回满足条件的元素。它是我正在寻找的元素上的CSS类。如果没有这样的元素，那么它将返回null

如果有人要查找多个元素，它只返回与你提供的元素最接近的父元素。

我的例子是:

if (el. classlist ?.contains('o-modal'))返回el;

我在vue组件(this.$el)中使用了它，将其更改为您的文档。函数getElementById，就可以开始了。希望对一些人有用✌️

2020-08-27 14:35:02

属性pDoc。亲子关系或pDoc。parentNode将为您提供父元素。

2011-07-28 09:39:18

var parentDiv = pDoc.parentElement

编辑:在某些情况下有时是parentNode。

https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement

2016-08-16 21:02:37