單擊時獲取父元素的 ID

Question

我正在嘗試在LI單擊時顯示父UL ID。 但警報顯示值未定義。 我哪里錯了？

HTML：

<ul id='uiID'>
    <li id='myLi'>A</li>
</ul>

JavaScript

var x = document.getElementById("myLI").parentNode.nodeName;
alert(x.id);

Answer 1

您沒有將任何點擊事件附加到元素和nodeName在您的情況下返回LI ，所以這是不想要的。 你想要的是

document.getElementById("myLI").onclick = function(e){
  alert(e.target.parentNode.id);
}

Answer 2

你可以這樣做：

<ul id='uiID'>
   <li id='myLi' onclick="alert(this.parentNode.id)">A</li>
</ul>

Answer 3

Javascript 對大多數情況都區分大小寫：

<li id='myLi'>A</li>
          ^^--- big L, small i

var x = document.getElementById("myLI").parentNode.nodeName;
                                   ^^---big L, big I

由於您使用的是未定義的 ID，因此 getElementById 將為“未找到匹配項”返回 null。 Null 沒有“parentNode”，因此您的錯誤。

Answer 4

var id = $(this).parent().attr("id");

console.log(id);

Answer 5

HTML：

<ul id='uiID'>
<li id='myLi'>A</li>
</ul>

JavaScript(*你只需要從 x 中刪除“.nodeName”)

var x = document.getElementById("myLi").parentNode;
alert(x.id);

Answer 6

您也可以使用最接近的函數來獲取父級。 獲得最接近我的元素的 ul。

var el = document.getElementById('myLi');

var r1 = el.closest("ul");

Answer 7

您可以使用 document.getElementById("myLI").parentElement.id

 <p>Example list:</p> <ul id="ul-id"> <li id="myLI">Coffee</li> <li>Tea</li> </ul> <p>Click the button to get the node name of the parent element of the li element in the list.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("myLI").parentElement.id; document.getElementById("demo").innerHTML = x; } </script>