รับ div div ขององค์ประกอบ


208

ควรจะง่ายจริงๆ แต่ฉันมีปัญหากับมัน ฉันจะรับ div parent ขององค์ประกอบย่อยได้อย่างไร

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กำหนดไม่เพียงตัวแปรบางอย่างของมัน

ความคิดใด ๆ

ป.ล. ฉันต้องการหลีกเลี่ยง jQuery ถ้าเป็นไปได้

คำตอบ:


336

คุณกำลังมองหาparentNodeซึ่งElementสืบทอดมาจากNode:

parentDiv = pDoc.parentNode;

การอ้างอิงที่มีประโยชน์:

  • ข้อมูลจำเพาะDOM2 Core - ได้รับการสนับสนุนเป็นอย่างดีจากเบราว์เซอร์หลักทั้งหมด
  • ข้อมูลจำเพาะDOM2 HTML - การเชื่อมโยงระหว่าง DOM และ HTML
  • ข้อมูลจำเพาะของแกน DOM3 - อัพเดตบางอย่างไม่สนับสนุนเบราว์เซอร์หลักทั้งหมด
  • ข้อมูลจำเพาะ HTML5 - ซึ่งตอนนี้มีการเชื่อมโยง DOM / HTML ในนั้น

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)
Ullullu

3
@ Ullullu - ดูสิห้องสมุด 10,000 บรรทัดหรือฟังก์ชั่น 10 บรรทัด? ;-)
RobG




-1

การรู้จักพาเรนต์ขององค์ประกอบนั้นมีประโยชน์เมื่อคุณพยายามที่จะจัดวางองค์ประกอบเหล่านั้นใน "การไหลจริง" ขององค์ประกอบ

รหัสด้านล่างนี้จะแสดงผล id ของพาเรนต์ขององค์ประกอบที่มีรหัสที่ให้ไว้ สามารถใช้สำหรับการวินิจฉัยการเยื้องศูนย์

<!-- 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 -->
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.