Получение родительского div элемента

208

Это должно быть очень просто, но у меня проблемы с этим. Как получить родительский div дочернего элемента?

Мой HTML:

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

Мой JavaScript:

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

Я бы подумал document.parentили parent.containerработал бы, но я продолжаю получать not definedошибки. Обратите внимание, что pDocон определен, но не некоторые его переменные.

Любые идеи?

PS Я бы предпочел по возможности избегать jQuery.

обертон
источник

Ответы:

336

Вы ищете parentNode, который Elementнаследует от Node:

parentDiv = pDoc.parentNode;

Полезные ссылки:

TJ Crowder
источник
33

Если вы ищете элемент определенного типа, который находится дальше, чем непосредственный родительский элемент, вы можете использовать функцию, которая поднимается вверх по DOM, пока не найдет его, или нет:

// Find first ancestor of el with tagName
// or undefined if not found
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }

  // Many DOM methods return null if they don't 
  // find the element they are searching for
  // It would be OK to omit the following and just
  // return undefined
  return null;
}
RobG
источник
с помощью jQuery: el.closest (tagName)
Уллуллу
3
@ Уллуллу - посмотрим, 10 000 строк библиотеки или функция из 10 строк? ;-)
RobG
14

Свойство pDoc.parentElementor pDoc.parentNodeдостанет вам родительский элемент.

Тор Якобсен
источник
0

Это может помочь вам.

ParentID = pDoc.offsetParent;
alert(ParentID.id); 
Синан ЧАЛИККАН
источник
-1

Знание родителя элемента полезно, когда вы пытаетесь расположить его в «реальном потоке» элементов.

Ниже приведенный код выведет идентификатор родителя элемента, чей идентификатор предоставляется. Может использоваться для диагностики смещения.

<!-- 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 -->
vish0910
источник