Shifting forward in an array when iterating over elements
Question
I have repeating elements (section) on a page. I want to iterate the background colors of the elements between three colors that are held in a array. And within some of those elements I have text (p) that I want to iterate through those same colors, except I want it to be the next color in the array as the background.
So if I have an array that looks like ["111111", "222222", "333333"], I want the background color of the first section to be #111111 and the color of the first p to be #222222. Also there are more elements on the page than there are items in the array so we need to loop back through the array. The page when complete should look like:
<body>
<section style="background-color: #111111;">
<p style="color: #222222;">foo bar</p>
</section>
<section" style="background-color: #222222;">
<p style="color: #333333;">foo bar</p>
</section>
<section style="background-color: #333333;">
<!--no p in this one-->
</section>
<section style="background-color: #111111;">
<p style="color: #222222;">foo bar</p>
</section>
</body>
I have the background-color part done but I can't figure out how to shift to the next item in the array and start over at the first item when necessary.
var bgColors = ["111111", "222222", "333333"];
$('section').each(function(i) {
var bgColor = bgColors[i % bgColors.length];
$(this).css('background-color', '#'+bgColor);
// How to do text color???
$(this).find("p").css('color', ???);
});
The script should be flexible so you can add and change colors. Thanks.
EDIT: I realized I left out an important point which is that not every section has ap so you can't just iterate through them each independently. Also due to a c&p mishap my html didn't match my JS. Apologies.
3 answers
solution1
2 ACCPTED 2017-09-30 21:41:33
Just use i+1 for the modulo for the foreground
It is the same logic you already apply for the bgColor, you just need to go one more for the foreground
var bgColors = ["red", "green", "blue", "yellow"]; $(function() { $('.section').each(function(i) { var bgColor = bgColors[i % bgColors.length]; var fgColor = bgColors[(i + 1) % bgColors.length]; $(this).css('background-color', bgColor); $(this).find(".text").css('color', fgColor); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="section"> <div class="text">foo bar</div> </div> <div class="section"> <div class="text">foo bar</div> </div> <div class="section"> <div class="text">foo bar</div> </div> <div class="section"> <div class="text">foo bar</div> </div>
solution2
1 2017-09-30 21:39:54
You can have a logic like
var bgColorIndex = i % bgColors.length;
var bgColor = bgColors[i % bgColors.length];
$(this).css('background-color', '#'+bgColor);
var fgColor = bgColorIndex + 1 === bgColors.length ? bgColors[0] : bgColors[bgColorIndex + 1];
$(this).find("p").css('color', fgColor);
It checks if the next index is equal to the length, set the color to the first item, otherwise set to the next color by incrementing.
Code example
var bgColors = ['red', 'blue', 'green', 'yellow']; $(document).ready(function() { $('.section').each(function(i) { var bgColorIndex = i % bgColors.length; var bgColor = bgColors[i % bgColors.length]; $(this).css('background-color', bgColor); var fgColor = bgColorIndex + 1 === bgColors.length ? bgColors[0] : bgColors[bgColorIndex + 1]; $(this).find(".text").css('color', fgColor); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="section"> <div class="text">foo bar</div> </div> <div class="section"> <div class="text">foo bar</div> </div> <div class="section"> <div class="text">foo bar</div> </div> <div class="section"> <div class="text">foo bar</div> </div> </body>
solution3
0 2017-09-30 21:45:41
Do you specifically need to do this in JavaScript for some reason, or would a pure CSS solution be preferable? Because you can achieve the same effect with :nth-child():
.section:nth-child(3n+1) {
background-color: #111;
}
.section:nth-child(3n+1) .text {
color: #222;
}
.section:nth-child(3n+2) {
background-color: #222;
}
.section:nth-child(3n+2) .text {
color: #333;
}
.section:nth-child(3n+3) {
background-color: #333;
}
.section:nth-child(3n+3) .text {
color: #111;
}
More performant, no FOUC, works for people with JavaScript disabled, etc.
Codepen: https://codepen.io/anon/pen/aLyOwJ
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.