Question

我有以下HTML标记。当单击任何li元素时，我需要将li元素w.r.t的索引获取到其父元素。这是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中被点击元素的实际索引不对应。

Answer 1

所以，你在这里遇到了一个主要问题和一个小问题。

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

要解决此问题，请将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++;
        }
    });
}
  };

干杯！

找一个html元素

1 个答案: