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

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

javascript jquery html css html-lists

22.03.2019 15:21

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

688

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

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

...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.info($("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>

22.03.2019 15:27

Ты имеешь в виду один из этих?

$act = $("li.active")
console.info(
  $("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>

22.03.2019 15:27

Эти примеры работают для меня, оба возвращают 2 для активного элемента.

console.info($('.pagination > li.active').index());//gets the index of the element relative to it's parent

console.info($('.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>

22.03.2019 15:28

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

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

Демо:

console.info($("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>

22.03.2019 15:28

Другие вопросы по теме

Есть ли способ показать div на той же странице с помощью jquery? Класс Div имеет параметры. Таким образом, обычный Div.show() не работает, так как мы не можем передать в него объект параметра

Класс html заменить строку символом

Нулевой параметр AJAX в действии контроллера

JQuery добавить класс на основе URL-адреса страницы с отдельными классами

Ninja Forms, проблема с jQuery

Установите текст и значение как для тега td, так и для входного тега одновременно с помощью jquery

Цикл JavaScript внутри цикла

Множественный выбор файлов с помощью Bootstrap и jQuery — код внутри

Почему я не могу сделать запрос от jquery к маршруту laravel?

Расчет продолжительности и отображение в календаре daterangepicker

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

Ответы 4

Другие вопросы по теме

Похожие вопросы