javascript - 没有id时如何获取列表事件元素的索引

Question

如何选择 .active 的索引<li>元素？

<ul class="pagination">
    <li class="paginate_button page-item previous" id="DataTables_Table_0_previous">
        <a tabindex="0" class="page-link" aria-controls="DataTables_Table_0" href="#" data-dt-idx="0">‹</a>
    </li>
    <li class="paginate_button page-item ">
        <a tabindex="0" class="page-link" aria-controls="DataTables_Table_0" href="#" data-dt-idx="1">1</a>
    </li>
    <li class="paginate_button page-item active">
        <a tabindex="0" class="page-link" aria-controls="DataTables_Table_0" href="#" data-dt-idx="2">2</a>
    </li>
    <li class="paginate_button page-item next disabled" id="DataTables_Table_0_next">
        <a tabindex="0" class="page-link" aria-controls="DataTables_Table_0" href="#" data-dt-idx="3">›</a>
    </li>
</ul>

这是我试过的，但它总是返回 1 :

var pageNumber = $('.pagination .page-item.active:first').index();

Answer 1

你说过你想要

...the index of the active <li> element. If the 10th element has .active class, then I need to get 9...

jQuery 的 index 功能给你:

var index = $("li.page-item.active").index();

实例:

console.log($("li.page-item.active").index());

.active {
  background: yellow;
}

<ul class="pagination">
    <li class="paginate_button page-item previous" id="DataTables_Table_0_previous">
        <a tabindex="0" class="page-link" aria-controls="DataTables_Table_0" href="#" data-dt-idx="0">‹</a>
    </li>
    <li class="paginate_button page-item ">
        <a tabindex="0" class="page-link" aria-controls="DataTables_Table_0" href="#" data-dt-idx="1">1</a>
    </li>
    <li class="paginate_button page-item active">
        <a tabindex="0" class="page-link" aria-controls="DataTables_Table_0" href="#" data-dt-idx="2">2</a>
    </li>
    <li class="paginate_button page-item next disabled" id="DataTables_Table_0_next">
        <a tabindex="0" class="page-link" aria-controls="DataTables_Table_0" href="#" data-dt-idx="3">›</a>
    </li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>