2011-07-28 43 views
142

Điều này phải thực sự đơn giản nhưng tôi đang gặp sự cố với nó. Làm thế nào để tôi có được một div cha của một phần tử con?Lấy div cha của phần tử

HTML

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

Javascript

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

Tôi đã có thể nghĩ document.parent hoặc parent.container sẽ làm việc nhưng tôi cứ bị not defined lỗi. Lưu ý rằng pDoc được xác định, không phải là một số biến nhất định của nó.

Bất kỳ ý tưởng nào?

P.S. Tôi muốn tránh jQuery nếu có thể.

Trả lời

240

Bạn đang tìm kiếm parentNode, mà Element thừa hưởng từ Node:

parentDiv = pDoc.parentNode; 

Tài liệu tham khảo Handy:

  • DOM2 Core đặc điểm kỹ thuật - hỗ trợ tốt bởi tất cả các trình duyệt chính
  • DOM2 HTML đặc điểm kỹ thuật - bindings giữa DOM và HTML
  • DOM3 Core đặc điểm kỹ thuật - một số cập nhật, không phải tất cả được hỗ trợ bởi tất cả các trình duyệt chính
  • HTML5 specification - mà hiện nay có nối kết DOM/HTML trong nó
8

Thuộc tính pDoc.parentElement hoặc pDoc.parentNode sẽ giúp bạn có được yếu tố phụ huynh.

26

Nếu bạn đang tìm kiếm một loại hình cụ thể của nguyên tố đó là xa hơn so với cha mẹ ngay lập tức, bạn có thể sử dụng một chức năng mà đi lên DOM cho đến khi nó tìm thấy một, hoặc không:

// 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; 
} 
+0

Tôi nghĩ bạn phải gán 'e1' cho' t' và đặt expr. 't.parentNode' trong điều kiện vòng lặp' while' nhưng không chỉ 't'. bởi vì t sẽ chỉ là một giá trị không phải là một biểu thức. phải không? –

+1

Bạn đang phải ... – RobG

+0

với jQuery: el.gần nhất (tagName) – Ullullu

2

Điều này có thể giúp bạn.

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

Biết phụ huynh của một phần tử rất hữu ích khi bạn đang cố gắng đặt chúng ra "thực dòng chảy" của các yếu tố.

Mã được cung cấp dưới đây sẽ xuất ra id của phụ huynh của phần tử có id được cung cấp. Có thể được sử dụng để chẩn đoán sai lệch.

<!-- 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 --> 
Các vấn đề liên quan