요소의 부모 div 얻기


208

이것은 정말 간단해야하지만 문제가 있습니다. 자식 요소의 부모 div는 어떻게 얻습니까?

내 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를 피하는 것을 선호합니다.

답변:



33

직계 부모보다 멀리 떨어진 특정 유형의 요소를 찾고 있다면 DOM을 찾을 때까지 또는 그렇지 않은 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가 제공된 element의 parent의 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.