Obtention du div d'élément parent

208

Cela devrait être vraiment simple mais j'ai des problèmes avec ça. Comment obtenir une division parent d'un élément enfant?

Mon HTML:

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

Mon JavaScript:

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

J'aurais pensé document.parentou parent.containertravaillerais mais je continue à recevoir des not definederreurs. Notez que le pDocest défini, mais pas certaines variables de celui-ci.

Des idées?

PS Je préférerais éviter jQuery si possible.

javascript html getelementbyid

— HARMONIQUE
source

336

Vous recherchez parentNode, qui Elementhérite de Node:

parentDiv = pDoc.parentNode;

Références utiles:

Spécification DOM2 Core - bien prise en charge par tous les principaux navigateurs
Spécification HTML DOM2 - liaisons entre DOM et HTML
Spécification DOM3 Core - certaines mises à jour, pas toutes prises en charge par tous les principaux navigateurs
Spécification HTML5 - qui contient désormais les liaisons DOM / HTML

— TJ Crowder
source

33

Si vous recherchez un type d'élément particulier qui est plus éloigné que le parent immédiat, vous pouvez utiliser une fonction qui monte le DOM jusqu'à ce qu'il en trouve un, ou pas:

// 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
source

avec jQuery: el.closest (tagName)

— Ullullu

3

@ Ullullu - voyons, 10 000 lignes de bibliothèque ou une fonction de 10 lignes? ;-)

— RobG

14

La propriété pDoc.parentElementou pDoc.parentNodevous obtiendra l'élément parent.

— Thor Jacobsen
source

3

var parentDiv = pDoc.parentElement

edit: c'est parfois parentNodedans certains cas.

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

— LoganDark
source

0

Cela pourrait vous aider.

ParentID = pDoc.offsetParent;
alert(ParentID.id);

— Sinan ÇALIŞKAN
source

-1

Connaître le parent d'un élément est utile lorsque vous essayez de les positionner hors du "flux réel" des éléments.

Le code donné ci-dessous affichera l'id du parent de l'élément dont l'id est fourni. Peut être utilisé pour le diagnostic de désalignement.

<!-- 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
source