jQuery的改变颜色递归

Question

这里是原代码jsfiddle和结果应该是像this

<div class="wrapper"> 
<div class="row"> 
    <div class="col red">R</div> 
    <div class="col blue">B</div> 
    <div class="col green">G</div> 
    <div class="col orange">O</div> 
</div> 
</div> 

是使命：上一行的最后一个颜色应该从previuos行下一行和第一颜色在第一应该是下一行中的第二位。

我认为我必须使用循环和递归，但我没有足够的知识来做到这一点。

感谢提前:)

Answer 1

您可以通过for循环运行，做这样的事情

检查这个片段

//last color of previous row should be first in next row 
 

 
//first color from previous row should be second in next row 
 
var colors = ['red', 'blue', 'green', 'orange']; 
 
$(document).ready(function() { 
 
    var rows = $('.row'); 
 
    rows.each(function(row) { 
 
    var index = $(this).index(); 
 
    var prevRow; 
 
    if (index > 0) 
 
     prevRow = $(this).prev(); 
 
    colorColumns($(this).find('.col'), prevRow); 
 
    }); 
 
}); 
 

 
function colorColumns(cols, prevRow) { 
 
    var index = 0; 
 
    // alert("hi"); 
 
    cols.each(function(col) { 
 
    var colIndex = $(this).index(); 
 

 
    if (prevRow) { 
 
     var cols = prevRow.find('.col').length; 
 
     var totalCols = cols - 1; 
 

 
     var currentIndex = ((colIndex + totalCols) % cols); 
 
     var prevRowColor = $(prevRow).find('.col').eq(currentIndex); 
 
     var classes = prevRowColor.attr('class'); 
 
     var classArr = classes.split(" "); 
 

 
     $(this).addClass(classArr[1]); 
 

 
    } else { 
 

 
     $(this).addClass(colors[colIndex]); 
 
    } 
 
    }); 
 

 
}

.row { 
 
    display: flex; 
 
} 
 
.row .col { 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
} 
 
.red { 
 
    background: red; 
 
} 
 
.orange { 
 
    background: orange; 
 
} 
 
.blue { 
 
    background: blue; 
 
} 
 
.green { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="row"> 
 
    <div class="col">R</div> 
 
    <div class="col">B</div> 
 
    <div class="col">G</div> 
 
    <div class="col">O</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col">R</div> 
 
    <div class="col">B</div> 
 
    <div class="col">G</div> 
 
    <div class="col">О</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col">R</div> 
 
    <div class="col">B</div> 
 
    <div class="col">G</div> 
 
    <div class="col">O</div> 
 
    </div>

希望它可以帮助