如何在滑块分页中找到当前类并将其添加到具有相同 div 数的另一个部分?

Question

这是我尝试使用的HTML和脚本。我需要将类"当前"添加到每个div 并让它像分页一样循环。

<div id="slider">
<div class="superslider"><img class="one"><img class="two"><img class="three"><img class="four">
<ul class="pagination">
<li class="current" data-index="0">Item 1</li>
<li data-index="1">Item 2</li>
<li data-index="2">Item 3</li>
<li data-index="3">Item 4</li>
</ul>
</div>
<div id="overlay" class="animations">
<div data-animation="animate"></div>
<div data-animation="animate"></div>
<div data-animation="animate"></div>
<div data-animation="animate"></div>
</div>    
</div>
//this is the script I am trying to make work.....    
$("#slider ul li").each(function(index) {
if ($(this).hasClass("current"))
$("#slider .animations:nth-child(" + (index + 1) + ")").addClass("current");
});

Answer 1

使用index()获取分页当前类元素在其同级元素中的索引，eq()以定位其他元素中的相同索引

const currIdx = $('.pagination .current').index();
$('.animations').children().eq(currIdx).addClass('current')

.animations .current{border:3px solid green; background:yellow }
li{ display: inline}
li.current{ color:red}
[data-animation] { height: 20px; border : 1px solid #ccc; margin:10px; background :pink}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
<div class="superslider"><img class="one"><img class="two"><img class="three"><img class="four">
<ul class="pagination">
<li class="current" data-index="0">Item 1</li>
<li data-index="1">Item 2</li>
<li data-index="2">Item 3</li>
<li data-index="3">Item 4</li>
</ul>
</div>
<div id="overlay" class="animations">
<div data-animation="animate"></div>
<div data-animation="animate"></div>
<div data-animation="animate"></div>
<div data-animation="animate"></div>
</div>    
</div>