使用 JavaScript 从列表中获取活动类索引

Question

I want to get the active class index using JavaScript. i done it with jQuery but i need it with JavaScript.

I done it with jQuery like this.

<li class="list"> .... </li>
<li class="list"> .... </li>
<li class="list"> .... </li>
<li class="list active"> .... </li>
<li class="list"> .... </li>

<script>
$('li.active').index()
</script>

i want same with javascipt

Answer 1

You can use querySelectorAll() to select all the required elements. Then convert it to array using javascript and then use indexOf() on that.

 const list = [...document.querySelectorAll('.list')]; const active = document.querySelector('.list.active'); console.log(list.indexOf(active))

 <li class="list"> .... </li> <li class="list"> .... </li> <li class="list"> .... </li> <li class="list active"> .... </li> <li class="list"> .... </li>

Answer 2

You can use the .call() method to invoke the array type's native .indexOf() method. This is how the .index() method is implemented in jQuery if you look at the source code. more about the same

 function getChildNumber(node) { return [].indexOf.call(node.parentNode.children, node); } let activeNode = document.getElementsByClassName('active')[0]; console.log(getChildNumber(activeNode));

 <li class="list"> .... </li> <li class="list"> .... </li> <li class="list"> .... </li> <li class="list active"> .... </li> <li class="list"> .... </li>