Öğenin üst div öğesinin alınması


211

Bu gerçekten basit olmalı ama sorun yaşıyorum. Bir alt öğenin üst div öğesini nasıl edinebilirim?

HTML kodum:

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

JavaScript'im:

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

Düşünürdüm document.parentya parent.containerda çalışırdım ama not definedhata almaya devam ediyorum . Bunun pDocbelirli değişkenler değil, tanımlandığını unutmayın .

Herhangi bir fikir?

PS Mümkünse jQuery önlemek istiyorum.

Yanıtlar:


340

Aradığınız parentNodehangi Elementdevralır Node:

parentDiv = pDoc.parentNode;

Kullanışlı Referanslar:

  • DOM2 Core spesifikasyonu - tüm büyük tarayıcılar tarafından iyi desteklenir
  • DOM2 HTML spesifikasyonu - DOM ve HTML arasındaki bağlantılar
  • DOM3 Core belirtimi - bazı güncellemeler, tümü tüm büyük tarayıcılar tarafından desteklenmiyor
  • HTML5 belirtimi - artık DOM / HTML bağlamaları var

34

Anlık üst öğeden daha uzakta olan belirli bir öğe türü arıyorsanız, DOM'u bulana kadar bulan ya da bulamayan bir işlevi kullanabilirsiniz:

// 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 ile: el.closest (tagName)
Ullullu

3
@ Ullullu — bakalım 10.000 satır kütüphane veya 10 satır fonksiyon? ;-)
RobG




0

Bir öğenin üst öğesini bilmek, öğelerin "gerçek akışı" dışına yerleştirmeye çalıştığınızda faydalıdır.

Aşağıda verilen kod, kimliği sağlanan öğenin üst öğesinin kimliğini verecektir. Yanlış hizalama teşhisi için kullanılabilir.

<!-- 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 -->
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.