迭代元素时在数组中向前移动

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.

我在页面上有重复的元素(部分)。我想迭代在数组中保存的三种颜色之间的元素的背景颜色。在其中一些元素中,我有文本(p),我想迭代这些相同的颜色,除了我希望它是数组中的下一个颜色作为背景。

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:

因此,如果我有一个看起来像[“111111”,“222222”,“333333”]的数组,我希望第一部分的背景颜色为#111111,第一部分的颜色为#222222。此外,页面上的元素数量多于数组中的项目数,因此我们需要循环返回数组。完成后的页面应如下所示:

<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 a p 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.

编辑:我意识到我遗漏了一个重要的观点,即不是每个部分都有一个p,所以你不能只是独立地遍历它们。另外由于c&p事故,我的HTML与我的JS不匹配。道歉。

3 个解决方案

#1

Just use i+1 for the modulo for the foreground

只需使用i + 1作为前景的模数

It is the same logic you already apply for the bgColor, you just need to go one more for the foreground

这与你已经应用于bgColor的逻辑相同,你只需要为前景再做一次

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>

#2

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>

#3

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():

您是否因为某些原因需要在JavaScript中执行此操作,还是纯CSS解决方案更适合?因为你可以用: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.

性能更高,没有FOUC,适用于禁用JavaScript的人等。

Codepen: https://codepen.io/anon/pen/aLyOwJ

#1