如何在 javascript 中找到 li 索引

Question

如何使用 javascript 查找 li 索引。我已經MARK UP了這個

<ul class="rh02nav">
               <li><a class="" href="#1" title="View Slide 1"><b>View Slide 1</b></a></li>
               <li><a class="o-hf rh02cnav" href="#2" title="View Slide 2 rh02cnav"><b>View Slide 2</b></a></li>
               <li><a class="o-hf " href="#3" title="View Slide 3"><b>View Slide 3</b></a></li>
               <li><a class="o-hf " href="#4" title="View Slide 4"><b>View Slide 4</b></a></li>
               <li><a class="o-hf " href="#5" title="View Slide 5"><b>View Slide 5</b></a></li>
            </ul>

我能找到父母李li 。 但我想要它的索引。

// working fine
console.log('Element',document.querySelector('.rh02nav .rh02cnav').parentElement)

// not working expected 1 .output -1
console.log(Array.prototype.indexOf.call(document.querySelector('.rh02nav li'), document.querySelector('.rh02nav .rh02cnav').parentElement))

這是我的完整代碼：
https://jsbin.com/luzuvisuvu/3/edit?html,js,控制台,output

Answer 1

let parent = document.querySelector('.rh02nav .rh02cnav').parentElement;
let childern = [...parent.children];
let index;
for(let i in children) 
if(children[i].classList.contains("rh02cnav") {
    index = i;
    break;
}

console.log(index);

如果 className 是唯一的，它會起作用

Answer 2

遍歷子 li 元素並查看其中的錨標記是否包含正確的 className：

 let children = document.querySelector('ul.rh02nav').children let idx for (let i = 0; i < children.length; i++) { if (children[i].querySelector('a').className.includes('rh02cnav')) { idx = i } } console.log('idx is ' + idx)

 <ul class="rh02nav"> <li><a class="" href="#1" title="View Slide 1"><b>View Slide 1</b></a></li> <li><a class="o-hf rh02cnav" href="#2" title="View Slide 2 rh02cnav"><b>View Slide 2</b></a></li> <li><a class="o-hf " href="#3" title="View Slide 3"><b>View Slide 3</b></a></li> <li><a class="o-hf " href="#4" title="View Slide 4"><b>View Slide 4</b></a></li> <li><a class="o-hf " href="#5" title="View Slide 5"><b>View Slide 5</b></a></li> </ul>