Как получить индекс активного элемента списка при отсутствии идентификаторов

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

Вы используете неправильный селектор, просто используйте:

$("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 2

Вы сказали, что хотите

... индекс активного элемента <li>. Если 10-й элемент имеет класс .active, тогда мне нужно получить 9 ...

Функция jQuery index дает вам:

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

Live Пример:

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 3

Эти примеры работают для меня, оба возвращают 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>

Answer 4

Вы имеете в виду один из них?

$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>