Как присвоить class определенному элементу списка?

[oleglantukh]

Доброе время суток!
Помогите пожалуйста решить задачу.
Есть простой список из n-го количества элементов

<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
</ul>

Еще есть точно такое же количество элементов кнопок

<div class="owl-dots">
    <button role="button" class="owl-dot"></button>
    <button role="button" class="owl-dot"></button>
    <button role="button" class="owl-dot active"></button>
    <button role="button" class="owl-dot"></button>
</div>

Кнопки принадлежат к плагину Owl Carousel и текущий элемент выделяется классом "active".

Суть задачи в следующем, необходимо присваивать class active или current нужному элементу списка в зависимости от того, какой button на текущей момент имеет class active.

Думаю связать элементы списка и кнопки data-атрибутами, например должно получится примерно так:

<ul>
    <li data-item="1"></li>
    <li data-item="2"></li>
    <li data-item="3" class="current"></li>
    <li data-item="4"></li>
</ul>

<div class="owl-dots">
    <button data-item="1" role="button" class="owl-dot"></button>
    <button data-item="2" role="button" class="owl-dot"></button>
    <button data-item="3" role="button" class="owl-dot active"></button>
    <button data-item="4" role="button" class="owl-dot"></button>
</div>

Помогите пожалуйста написать скрипт, который будет находить button с классом active и присваивать класс active или current нужному элементу списка

[рони]

oleglantukh,
https://owlcarousel2.github.io/OwlCa...pi-events.html

[oleglantukh]

oleglantukh,
https://owlcarousel2.github.io/OwlCa...pi-events.html

Дело в том что сам список отношения к плагину не имеет, мне нужен скрипт, который будет отслеживать какая кнопка в данный момент имеет класс active и присваивать класс элементу списка с таким же data-атрибутом

[рони]

oleglantukh,
по ссылке, первый пример, это то что вам нужно! никаких data-атрибут для этого не требуется, достаточно добавить class для ul.

[oleglantukh]

oleglantukh,
по ссылке, первый пример, это то что вам нужно! никаких data-атрибут для этого не требуется, достаточно добавить class для ul.

Я понял, спасибо большое! Буду разбираться

[рони]

oleglantukh,
//возможно event.page.index

$('.owl-carousel').on('changed.owl.carousel', function(event) {
    $('ul li').removeClass('current').eq(event.item.index).addClass('current')
})

[oleglantukh]

//возможно event.page.index

Спасибо большое, ваше решение помогло!
Вот готовый рабочий скрипт:

$('.owl-carousel').on('changed.owl.carousel', function(event) {
	$('ul li').removeClass('current').eq(event.page.index).addClass('current')
})