인덱스를 사용하여 다른 divs에 활성 클래스 추가

Question

두 클래스가 동일한 div입니다.

이제 모든 요소의 앵커 태그를 클릭하면됩니다. 두 번째 div의 동일한 위치에 클래스를 추가하고 싶습니다.

거울 :JSFiddle

jQuery 코드 :

$(document).on('click', '.loadDots li a', function() { 
 
    $('.loadDots li a').removeClass('active'); 
 
    alert("clicked"); 
 
    $('.loadDots li a').eq($(this).index()).addClass('active'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="loadDots"> 
 
    <ul> 
 
     <li><a ng-show="data.showIcon1" ng-click="getId(1)" class="active" href="#">aaaa</a> 
 
     </li> 
 
     <li><a ng-show="data.showIcon2" ng-click="getId(2)" href="#" class="">aaaa</a> 
 
     </li> 
 
     <li><a ng-show="data.showIcon3" ng-click="getId(3)" href="#" class="">aaaa</a> 
 
     </li> 
 
     <li><a ng-show="data.showIcon4" ng-click="getId(4)" href="#" class="">aaaa</a> 
 
     </li> 
 
     <li><a ng-show="data.showIcon5" ng-click="getId(5)" href="#" class="">aaaa</a> 
 
     </li> 
 
    </ul> 
 
</div> 
 
<div class="loadDots"> 
 
    <ul> 
 
     <li><a ng-show="data.showIcon1" ng-click="getId(1)" href="#">ssss</a> 
 
     </li> 
 
     <li><a ng-show="data.showIcon2" ng-click="getId(2)" href="#" class="">sss</a> 
 
     </li> 
 
     <li><a ng-show="data.showIcon3" ng-click="getId(3)" href="#" class="">sss</a> 
 
     </li> 
 
     <li><a ng-show="data.showIcon4" ng-click="getId(4)" href="#" class="">sss</a> 
 
     </li> 
 
     <li><a ng-show="data.showIcon5" ng-click="getId(5)" href="#" class="">sss</a> 
 
     </li> 
 
    </ul> 
 
</div>

어떤 아이디어?

감사

Answer 1

확인 DEMO

$(document).on('click','.loadDots li a',function() { 
var that = $(this); 
$('.loadDots li a').removeClass('active'); 
var ind = that.closest('li').index(); 
$('.loadDots').each(function() { 
    $(this).find('li').eq(ind).find('a').addClass('active'); 
}); 

});