Найти элемент HTML - PullRequest
Новая
       9

Найти элемент HTML

0 голосов
/ 05 мая 2018

У меня есть следующая HTML-разметка. Мне необходимо получить индекс элемента li w.r.t к его родительскому элементу при нажатии любого элемента 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.

1 Ответ

0 голосов
/ 05 мая 2018

Итак, у вас есть одна главная и одна второстепенная проблема.

Основная проблема, которая приводит к неправильному индексу, заключается в том, что существует множество вещей, которые могут быть частью дочернего списка родителей, которые не считаются «узлами», например, пробелами. и тому подобное.

Чтобы исправить это, переключите parent.firstChild на parent.firstElementChild и child.nextSibling на child.nextElementSibling. Это, по большей части, исправит код, но просто исправит мелкую проблему, вы также, вероятно, захотите вызвать event.stopPropagation в верхней части слушателя, иначе он будет рекурсивно вызывать одну и ту же логику для всех родителей до конца. иерархия, приводящая к нескольким оповещениям, которые, вероятно, не ожидаются.

Правильный код: 

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++;
        }
    });
}
  };

Ура!

...