javascript - 查找 li 在 li 列表中的位置

Question

所以我们在一个页面中有一个li列表

    <li class="page-list">
      <ol>

        <li><button data-ember-action="" data-ember-action-2354="2354">2</button></li>
        <li><button data-ember-action="" data-ember-action-2356="2356">3</button></li>
        <li><button data-ember-action="" data-ember-action-2358="2358">4</button></li>
        <li><button data-ember-action="" data-ember-action-2360="2360">5</button></li>
        <li><button data-ember-action="" data-ember-action-2362="2362">6</button></li>
<li class="active">7</li>
        <li><button data-ember-action="" data-ember-action-2364="2364">8</button></li>
        <li><button data-ember-action="" data-ember-action-2366="2366">9</button></li>
        <li><button data-ember-action="" data-ember-action-2368="2368">10</button></li>
        <li><button data-ember-action="" data-ember-action-2370="2370">11</button></li>
      </ol>
    </li>

现在，我知道如何找到 <li class="page-list"> 中所有 li 的长度了。但是如何确定特定 li 在列表中的位置？

例如在上面粘贴的代码中，有一个 <li>故意不对齐。现在我想从给定的 li 列表中确定它的位置，我如何使用 javascript 来确定它的位置(如果你算的话，它是手动的，它是数组中的第 5 个)

Answer 1

将元素的parentNode转成数组，然后找到自己的索引:

const el = document.querySelector("li.active");

const elPosition = [...el.parentNode.children].indexOf(el);