Question

我正在尝试在UL点击上显示父LI的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将为＆＃34;未找到匹配项＆＃34;返回null。 Null没有＆＃34; parentNode＆＃34;，因此你的错误。

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>

单击时获取父元素的ID

7 个答案: