jQueryの - 1つのリスト項目からアクティブなクラスを見つけ、別のリストにこのクラスを与える

Question

私は

<ol class="rightci carousel-indicators"> 
    <li class="active" data-target="#carousel-example-generic" data-slide-to="0" ></li> 
<li data-target="#carousel-example-generic" data-slide-to="1" ></li> 
<li data-target="#carousel-example-generic" data-slide-to="2" ></li> 
<li data-target="#carousel-example-generic" data-slide-to="3" ></li> 
</ol> 

セカンド

まず、ブートストラップカルーセルの2つの指標のリストを持っている

私が欲しいもの

<div class="left leftci carousel-indicators"> 
<a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="0">slide1</span></a> 
<a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="1">slide2</span></a> 
<a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="2">slide3</span></a> 
<a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="3">slide4</span></a> 
</div> 

最初のリストの子がactiveのクラスを持ち、アクティブなクラスが2番目の子を同じインデックス番号の子にリストした場合、チェックが行われます。拳リストとして

はcarousel itemは、例えば

変更などが変化....カルーセルインジケータリストである： を最初のリストから3番目の項目はクラスactiveを有する場合、第2のリストの3番目の項目にactiveを与える

jQueryのは、私は私が今だけ例をRITい

var index = $('#rcl li.active').parent().index(); 
    $('#lcl span.activelink').removeClass('activelink'); 
    $('#lcl span').eq(index).addClass('activelink'); 

が...私は両方のインジケータにアクティブなクラスを移動したい（私はjQueryのに新しいです）試してみました

Answer 1

これはあなたのために働くかもしれない：

var index = $('#rcl li.active').attr('slide-to'); 
$('#lcl span.activelink').removeClass('activelink'); 
$('#lcl span[slide-to=' + index + ']').addClass('activelink'); 

EDIT

$('#rcl li').click(function(event) { 
 

 
    // set active to the clicked element 
 
    $('#rcl li.active').removeClass('active'); 
 
    $(event.target).addClass('active'); 
 

 
    // get active element 
 
    var index = $('#rcl li.active').attr('data-slide-to'); 
 

 
    // apply active to the second list 
 
    $('#lcl span.activelink').removeClass('activelink'); 
 
    $('#lcl span[data-slide-to=' + index + ']').addClass('activelink'); 
 

 
});

#rcl li { 
 
    cursor: pointer; 
 
} 
 
#rcl li.active { 
 
    color: red; 
 
} 
 
#lcl span.activelink { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<ol id="rcl" class="rightci carousel-indicators"> 
 
    <li class="active" data-target="#carousel-example-generic" data-slide-to="0">one</li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1">two</li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2">three</li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="3">four</li> 
 
</ol> 
 

 
<div id="lcl" class="left leftci carousel-indicators"> 
 
    <a href=""><span class="leftindicators activelink" data-target="#carousel-example-generic" data-slide-to="0">slide1</span></a> 
 
    <a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="1">slide2</span></a> 
 
    <a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="2">slide3</span></a> 
 
    <a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="3">slide4</span></a> 
 
</div>

Answer 2

これを試してみてください：

var index = $('.rightci li.active').data('slide-to');  
$('.rightci li').removeClass('active');  
$('.leftci a')eq(index).find('span').addClass('active');