Блог

Главная - Вопросы по программированию - Как получить индекс активного элемента списка, когда нет идентификаторов

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

#javascript #jquery #html #css #html-lists

#javascript #jquery #HTML #css #html-списки

Вопрос:

Как я могу выбрать индекс .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();

Комментарии:

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

2. var index = $(‘li.active’).index();

Ответ №1:

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

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

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

 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>

Ответ №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>

Ответ №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>

Ответ №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>