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

【问题标题】：Shifting forward in an array when iterating over elements迭代元素时在数组中向前移动
【发布时间】：2017-10-01 06:07:19
【问题描述】：

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

所以如果我有一个看起来像 ["111111", "222222", "333333"] 的数组，我希望第一部分的背景颜色为 #111111，第一个 p 的颜色为 #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>

我已经完成了背景颜色部分，但我不知道如何转移到数组中的下一项并在必要时从第一项重新开始。

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', ???);
});

脚本应该灵活，以便您可以添加和更改颜色。谢谢。

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

【问题讨论】：

标签： javascript jquery html arrays

【解决方案1】：

只需使用i+1 为前景取模

这与你已经为 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】：

你可以有这样的逻辑

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);

它检查下一个索引是否等于长度，将颜色设置为第一项，否则通过递增设置为下一个颜色。

代码示例

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>

【讨论】：

做到了，谢谢！获取 bgColorIndex 是我缺少的步骤

【解决方案3】：

您是否出于某种原因特别需要在 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;
}

性能更高，无 FOUC，适用于禁用 JavaScript 的人等。

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

【讨论】：

不幸的是因为这个网站的模块渲染我不能做纯css，同意否则会更好