点击时获取父元素的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);

- Omkar

---

大小写不匹配 - myLi 和 myLI - sidgate

Answer 1

您没有将任何点击事件附加到元素，而在您的情况下nodeName返回LI，所以这不是您想要的。您需要的是

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

- Amit Joki

---

可能更加清晰的方法是使用 addEventListener，但是 e.target.parentNode 是找到实际被点击节点的父节点的正确方式。 - Paul S.

Answer 2

你可以像这样做：

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

- potashin

---

@Omkar：很高兴能帮助你。 - potashin

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”，因此会出现错误。

- Marc B

Answer 4

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

console.log(id);

- Omair

Answer 5

你可以使用 closest 函数来获取父元素。 获取最接近我的元素的 ul。

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

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

- benzo

Answer 6

您可以使用 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>

- ShriP

Answer 7

HTML：

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

JavaScript（*你只需要从x中删除“.nodeName”）

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

- user13441281