Question

我的结构看起来像下面那个，我正在尝试获取ID foo。如果我们从DIV onclick冒出来，则仅 func()带有ID，这意味着不会有其他 DIV 包含foo内的ID。但是，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

您可以使用clicked元素的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

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.net/4yUqL/37/

javascript获取外部父ID ID

6 个答案: