使用索引在不同的div上添加Active Class

时间:2014-12-29 11:36:44

标签: javascript jquery html

我有两个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>
&#13;
&#13;
&#13;

有什么想法吗?

由于

1 个答案:

答案 0 :(得分:2)

检查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');
});

});