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

你说过要

...有效的<li>元素的索引。如果第十个元素具有.active类，那么我需要获取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>

Answer 2

您使用了错误的选择器，只需使用：

$("ul.pagination li.active").index()

演示：

console.log($("ul.pagination li.active").index());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 3

您是说其中之一吗？

$act = $("li.active")
console.log(
  $("li").index($act), // or
  $act.index()
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 4

这些示例对我有用，都为活动元素返回2。

console.log($('.pagination > li.active').index());//gets the index of the element relative to it's parent

console.log($('.pagination > li.active > a').data('dt-idx'));//gets the data-dt-idx value

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

没有ID时如何获取列表活动元素的索引

4 个答案: