parentNode madness를 방지하는 방법은 무엇입니까?

Question

이벤트 핸들러가 다른 항목 목록이 있습니다.

function addToList(event){ 
    var id = event.target.getAttribute('data-id'); 
    var listId = event.target.parentNode.parentNode.getAttribute('data-id'); 
    // XHR stuff 
} 

이 코드에 문제가 없지만, parentNode.parentNode 정말 깨지기 쉬운 것 같다 .list에서 모든 li

... 
<li> 
    <div class="item" data-id="1234"> 
    <h3>Item</h3> 
    <div class="description">...</div> 
    <ul class="lists"> 
     <li data-list-id="1">Add to list A<li> 
     <li data-list-id="2">Add to list B<li> 
     <li data-list-id="3">Add to list C<li> 
    </ul> 
    <button class="delete">delete</button> 
    </div> 
</li> 
... 

은 다음과 같다 등록 된 클릭 이벤트가 있습니다. 버튼은 하나의 parentNode가 될 것이고 더 깊게 중첩 된 요소는 parentNode^n

이것이 일반적인 문제이며보다 강력한 솔루션이 있다고 생각하십니까? jQuery를 사용하면 $(target).parentNode('.item')

jQuery없이이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

Answer 1

내 프로젝트의 일부로, 나는 항상 내 자신의 도구 상자를 작성합니다. 물론 jQuery를 사용할 수는 있지만 엄밀히 말하면 제 정밀 툴킷을 고수 할 것입니다. 감사합니다! 그걸 염두에두고

가하는이 봐 가지고 : 귀하의 경우

function findParent(source,filter,root) { 
    root = root || document.documentElement; 
    while(source != root) { 
     if(filter(source)) return source; 
     source = source.parentNode; 
    } 
} 

을, 당신은 지금 호출 할 수 있습니다

var listId = findParent(
     event.target, 
     function(e) {return e.attributes && e.attributes['data-id'];} 
    ).getAttribute("data-id"); 
// note that you should probably break that down, checking if an element 
// is found before getting its attribute value... or let the error 
// kill your script. Either works. 

을 지금, 여기 좀 더 지저분 이상의 볼을하나요 단순한 .parentNode.parentNode이지만 심도가 특정 숫자 인 것에 의존하지 않으므로 훨씬 강력합니다. 이는 내가 생각한 것입니다.