Mendapatkan div elemen induk

208

Ini seharusnya sangat sederhana tetapi saya mengalami masalah dengan itu. Bagaimana cara saya mendapatkan div induk dari elemen anak?

HTML saya:

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

JavaScript saya:

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

Saya akan berpikir document.parentatau parent.containerakan bekerja tetapi saya terus mendapatkan not definedkesalahan. Perhatikan bahwa pDocdidefinisikan, tidak hanya variabel tertentu.

Ada ide?

PS Saya lebih suka menghindari jQuery jika memungkinkan.

NADA TAMBAHAN
sumber

Jawaban:

33

Jika Anda mencari jenis elemen tertentu yang lebih jauh dari induk langsung, Anda dapat menggunakan fungsi yang naik DOM sampai menemukan, atau tidak:

// 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
sumber
dengan jQuery: el.closest (tagName)
Ullullu
3
@ Ullullu — mari kita lihat, 10.000 baris perpustakaan atau fungsi 10 baris? ;-)
RobG
14

Properti pDoc.parentElementatau pDoc.parentNodeakan membuat Anda elemen induk.

Thor Jacobsen
sumber
0

Ini mungkin bisa membantu Anda.

ParentID = pDoc.offsetParent;
alert(ParentID.id); 
Sinan ÇALIŞKAN
sumber
-1

Mengetahui induk suatu elemen berguna ketika Anda mencoba memposisikannya sebagai "aliran-nyata" elemen.

Kode yang diberikan di bawah ini akan menampilkan id induk elemen yang idnya disediakan. Dapat digunakan untuk diagnosis misalignment.

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