спаренные неупорядоченные

Question

Так у меня есть эта структура:

<ul> 
     <li class="paginator"><a class="active">1</a></li> 
     <li class="paginator"><a>2</a></li> 
     <li class="paginator"><a>3</a></li> 
    </ul> 
    ... bunch of html code 
    <ul> 
     <li class="paginator"><a class="active">1</a></li> 
     <li class="paginator"><a>2</a></li> 
     <li class="paginator"><a>3</a></li> 
    </ul> 

Что неупорядоченные якоря, каждый раз, когда пользователь нажимает на якоре становится от активных класса. Мой вопрос: какой лучший способ дублировать этот эффект на обоих якорях. Пока, когда я нажимаю на якорь 2 дна, он успешно получает класс , но якорь 2 вершины нет. Есть ли способ иметь что-то вроде близнецов или клонированных элементов?

Answer 1

Вы можете получить индекс щелкнули li.paginator элемента, и установить активный класс к любому другому li.paginator с тем же индексом, используя nth-child, таким образом класс будет добавлен как UL-х

var lis = $('.paginator').on('click', function(e) { 
 
\t e.preventDefault(); 
 
    var idx = $(this).closest('li').index(); 
 
    
 
\t lis.find('a').removeClass('active'); 
 
    lis.filter(':nth-child('+(idx+1)+')').find('a').addClass('active'); 
 
});

a {cursor : pointer} 
 
a.active { 
 
    text-decoration: underline; 
 
    color: red!important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
     <li class="paginator"><a class="active">test 1</a></li> 
 
     <li class="paginator"><a>test 2</a></li> 
 
     <li class="paginator"><a>test 3</a></li> 
 
    </ul> 
 
    <!-- ... bunch of html code --> 
 
    <ul> 
 
     <li class="paginator"><a class="active">test 1</a></li> 
 
     <li class="paginator"><a>test 2</a></li> 
 
     <li class="paginator"><a>test 3</a></li> 
 
    </ul>

Answer 2

Если вы установите его, как это должно работать одинаково для обоих ул элементов, если вы не желаете, элементы для отражения друг друга:

$('.paginator').click(function(){ $(this).find('a').addClass("active") });