Javascript获取外层父id DIV

Question

我有一个如下所示的结构，我正在尝试获取 id foo。如果我们从 onclick func() 冒泡，它是唯一具有 id 的 DIV，这意味着有不会是在 foo 中包含 id 的其他 DIV。但是，foo 内可以有其他包含 id 的标记（例如 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

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 节点或您当前正在执行的任何操作。

Answer 2

这应该可以做到：

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

您可以使用被单击元素的parentNode 属性来向上迭代DOM 树。

IE：

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

Answer 4

elem 是单击时调用函数的元素

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

Answer 5

你不能应用更简单的模式吗？不要在单元格中设置 onclick 属性，而是将一个单击处理程序附加到最外层的 div，然后您只需引用 this：

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

http://jsfiddle.net/fRxYB/

还是我完全没有抓住要点？

Answer 6

为了有一个更通用的版本，我建议这样：

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。净/4yUqL/37/