javascript получить внешний родительский идентификатор DIV

Question

У меня есть структура, которая выглядит как внизу, я пытаюсь получить идентификатор foo. Это толькоDIV с идентификатором, если мы пузыриться от onclickfunc(), что означает, что существует обыкновение быть другие DIVs, которые содержат идентификатор внутри foo. Однако в foo могут быть другие теги, которые содержат идентификатор (например, bye, hello).

Никакие рамки не используются.

<div id="bar"></div> 
<div id="foo"> 
    <p><p> 
    <div class="bye"> 
     <input id="bye" type="text" value="test" /> 
     <input id="hello" type="text" value="test" /> 
     <table> 
      <tr><td onclick="func(event)">1</td></tr> 
      <tr><td onclick="func(event)">2</td></tr> 
     </table> 
    </div> 
</div> 

Answer 1

Это следует сделать это:

<div id="bar"></div> 
<div id="foo"> 
    <p><p> 
    <div class="bye"> 
     <input id="bye" type="text" value="test" /> 
     <input id="hello" type="text" value="test" /> 
     <table> 
      <tr><td onclick="func(this)">1</td></tr> 
      <tr><td onclick="func(this)">2</td></tr> 
     </table> 
    </div> 
</div> 

<script type="text/javascript"> 
    function func(elt) { 
      // Traverse up until root hit or DIV with ID found 
     while (elt && (elt.tagName != "DIV" || !elt.id)) 
      elt = elt.parentNode; 
     if (elt) // Check we found a DIV with an ID 
      alert(elt.id); 
    } 
</script> 

Answer 2

function findIdOfParent(obj) { 
    var o = obj; 
    while(!o.id) { 
    o = o.parentNode; 
    } 

    alert(o.id); // 'foo' 
} 

findIdOfParent Функция принимает узел DOM. Вы можете назвать это с помощью onclick="findIdOfParent(this);", но если вы хотите только передать event, как в вашем примере, вам нужно будет извлечь узел DOM из event.target или что бы вы ни делали в данный момент.

Answer 3

Вы можете использовать свойство parentNode элемента, щелкнувшего элемент, для итерации по дереву DOM.

т.е.

<td onclick="func(this)"> 
function func(item) 
{ 
    var parent = item.parentNode; 
    // and so on, or something similar 
    var divId = div.id; 
} 

Answer 4

элем является элементом, который вызывает функцию по щелчку

var found = false; 
var myId = ""; 
while (elem &&!found) { 
    if (elem.id){ 
     found = true; 
     myId = elem.id; 
    } 
    elem = elem.parentNode; 
} 

Answer 5

Чтобы иметь несколько более общий вариант, Я бы предложил следующее:

function func(event) { 
    var par = findTop(event.target); 
    console.log(par); 
}; 

function findTop(node) { 
    while(node.parentNode && node.parentNode.nodeName !== 'BODY') { 
     node = node.parentNode; 
    } 

    return node; 
} 

пример: http://www.jsfiddle.net/4yUqL/37/

Answer 6

Не можете применить более простой шаблон? Вместо того, чтобы OnClick свойства в клетках, прикрепить один обработчик щелчка к вашему внешней DIV (ов), то вам просто необходимо обратиться к this:

document.getElementById("foo").onclick = function(event) { 
    if(e.target.tagName.toLowerCase() == "td") { 
     alert(this.id); 
    } 
}; 

http://jsfiddle.net/fRxYB/

Или я полностью отсутствует смысл?