2011-01-11 50 views
2

我有一个看起来像下面的结构,我试图得到id foo。这是只有DIV与ID如果我们从onclickfunc()冒泡,这意味着不会是其他DIVs其中包含foo内的id。但是,foo中可能包含一个包含id的其他标签(例如bye, hello)。javascript获取外部父ID DIV

没有框架被使用。

<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> 
+3

你的问题到底是什么? –

+1

当我点击一个表格单元格时试图获得id'FOO'。 – Mike

+1

引用:我试图让id foo。这就是问题所在。 – Steve

回答

3

这应该做它的元素:

<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> 
8
function findIdOfParent(obj) { 
    var o = obj; 
    while(!o.id) { 
    o = o.parentNode; 
    } 

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

函数findIdOfParent取DOM节点。你可以用onclick="findIdOfParent(this);"来调用它,但是如果你只想通过event,就像在你的例子中那样,你必须从event.target或者你现在正在做的任何事情中提取DOM节点。

+0

这必须是正确的答案,而不是没有任何解释的接受答案 –

1

您可以使用clicked元素的parentNode属性遍历DOM树。

即:

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

ELEM是调用函数上点击

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

要有一个较为宽泛的版本,我建议这样做:

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/

1

难道你不能应用更简单的模式吗?相反,在你的细胞中的onclick属性,附加一个单击处理程序到您的最外层的div(S),那么你只需要参考this

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

http://jsfiddle.net/fRxYB/

还是我完全失踪点?