时间戳

首页 > 解决方案 > 找到一个 html 元素

javascript - 找到一个 html 元素

问题描述

我有以下 HTML 标记。当单击任何 li 元素时，我需要获取 li 元素的索引到其父元素。这是HTML代码： 

window.onload = function() {
  var allTags = document.getElementsByTagName("li");
  for (var i = 0; i < allTags.length; i++) {
    allTags[i].addEventListener("click", function() {
      var x = event.target;
      var parent = x.parentElement;
      console.log("Parent " + parent.innerHTML);
      var count = 0;
      console.log("Parent text is " + parent.innerHTML);
      for (var child = parent.firstChild; child != null; child = child.nextSibling) {
        // console.log("X text  "+x.innerHTML);
        // console.log("Child Text "+child.innerHTML);

        if (child.isSameNode(x)) {
          alert("Index is " + count);
        }
        count++;
      }
    });
  }
};
<!-- When <li> is clicked display alert which will contain index number of <li> and count of <li> in parent <ul> -->
<div class="holder">
  <ul class="list" id="lists">
    <li>1 text text text</li>
    <li id="item">2 text text text
      <ul id="lists1">
        <li>Ahtesham
          <ul> Samaid
            <li>1 text text text</li>
            <li>2 text text text
          </ul>
          </li>
          <li>text text text</li>
          <li>text text text</li>
          <li>text text text</li>
          <li>text text text</li>
      </ul>
      </li>
      <li>text text text</li>
      <li>
        text text text
        <ul>
          <li>text text text</li>
          <li>text text text</li>
          <li>text text text</li>
        </ul>
      </li>
      <li>text text text</li>
  </ul>
  <ul class="list" id="lists2">
    <li>text text text</li>
    <li>text text text</li>
    <li>
      text text text
      <ul>
        <li>text text text</li>
        <li>text text text</li>
        <li>text text text</li>
        <li>text text text</li>
      </ul>
    </li>
  </ul>
</div>

该代码确实给了我一个索引，但它与 HTML 中单击元素的实际索引不对应。

标签： javascripthtmlhtml-lists

解决方案

所以，这里有一个主要问题和一个次要问题。

导致索引不正确的主要问题是，有很多东西可能是父子列表的一部分，而不是您认为是“节点”的东西，例如空格等.

要解决此问题，请切换parent.firstChild到parent.firstElementChild和child.nextSibling到child.nextElementSibling。那，在大多数情况下将修复代码，但只是修复小问题，您可能还想event.stopPropagation在侦听器的顶部调用，否则它将递归调用 dom 层次结构中所有父级的相同逻辑，导致在可能不是预期的多个警报中。

正确代码：

window.onload = function(){ 
var allTags=document.getElementsByTagName("li");
for(var i=0;i<allTags.length;i++){
    allTags[i].addEventListener("click", function(){
        var x=event.target;
        event.stopPropagation(); \\ prevent unnecessary alerts
        var parent=x.parentElement;
        var count=0;
        for(var child=parent.firstElementChild;child!=null;child=child.nextElementSibling){  
            if(child.isSameNode(x)){
                alert("Index is "+count);
                return; // went ahead and returned from the listener function here, since you've found what you want
            }
            count++;
        }
    });
}
  };

干杯!

推荐阅读