Получение родительского 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;

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


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;
}

с помощью jQuery: el.closest (tagName)
Уллуллу

3
@ Уллуллу - посмотрим, 10 000 строк библиотеки или функция из 10 строк? ;-)
RobG




-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 -->
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.