javascript javascript获取外部父ID DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4658927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript obtain outer parent id DIV
提问by Mike
I have a structure that looks like the one below, I'm trying to get the id foo. It is the onlyDIVwith id if we bubble up from the onclickfunc(), which means that there wont be other DIVsthat contain an id inside foo. However, there can be other tags inside foothat contain an id (such as bye, hello).
我有一个类似于下面的结构，我正在尝试获取 id foo。如果我们从 冒泡出来，它是唯一DIV带有 id 的onclickfunc()，这意味着不会有其他包含 id 内部的DIVfoo。但是，内部foo可能还有其他包含 id 的标签（例如bye, hello）。
No frameworks are being used.
没有使用任何框架。
<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>
回答by dxh
function findIdOfParent(obj) {
var o = obj;
while(!o.id) {
o = o.parentNode;
}
alert(o.id); // 'foo'
}
The function findIdOfParenttakes a DOM node. You could call it with onclick="findIdOfParent(this);", but if you only want to pass event, as in your example, you'd have to extract the DOM node from event.targetor whatever you're currently doing.
该函数findIdOfParent采用一个 DOM 节点。您可以使用 调用它onclick="findIdOfParent(this);"，但如果您只想传递event，就像在您的示例中一样，您必须从中提取 DOM 节点event.target或您当前正在执行的任何操作。
回答by MarkXA
This should do it:
这应该这样做：
<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>
回答by karim79
Can't you apply a simpler pattern? Instead of having onclick properties in your cells, attach a single click handler to your outermost div(s), then you just need to refer to this:
你不能应用更简单的模式吗？不要在单元格中具有 onclick 属性，而是将单击处理程序附加到最外面的 div(s)，然后您只需要引用this：
document.getElementById("foo").onclick = function(event) {
if(e.target.tagName.toLowerCase() == "td") {
alert(this.id);
}
};
Or am I completelymissing the point?
还是我完全没有抓住重点？
回答by Steve
You could use the parentNode property of the clicked element to iterate up through the DOM tree.
您可以使用被点击元素的 parentNode 属性来遍历 DOM 树。
ie:
IE：
<td onclick="func(this)">
function func(item)
{
var parent = item.parentNode;
// and so on, or something similar
var divId = div.id;
}
回答by stecb
elem is the element that call the function on click
elem 是点击时调用函数的元素
var found = false;
var myId = "";
while (elem &&!found) {
if (elem.id){
found = true;
myId = elem.id;
}
elem = elem.parentNode;
}
回答by jAndy
To have a somewhat more generic version, I'd suggest this:
为了有一个更通用的版本，我建议这样做：
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;
}
example: http://www.jsfiddle.net/4yUqL/37/
