javascript獲取外部父ID ID

Question

我有一個看起來像下面的結構，我正在嘗試獲取id foo 。 如果我們從onclick func()冒出來，它是唯一帶有id的DIV ，這意味着不會有其他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);"來調用它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（S），那么你只需要參考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/