jquery - 在灵活数量的 div 上动态分布 CSS 效果

Question

我有一个菜单，其中每个 li 都有绿色背景色。我(客户)希望接下来的每一个li都轻一点。

目前我的情况是这样的:

.Menu > li:nth-child(2):before {
    background-color: rgba(84,175,50,0.93) !important;
}

.Menu > li:nth-child(3):before {
    background-color: rgba(84,175,50,0.86);
}

.Menu > li:nth-child(4):before {
    background-color: rgba(84,175,50,0.79);
}

我的 HTML 看起来像这样

<ul class="hoofdMenu vertical nested">
  <li><a href="#">Zuid-Holland</a></li>
  <li><a href="#">Scholen</a></li>
  <li id="klikken">
    <a href="#">Parken</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1B</a></li>
      <li><a href="#">Item 1C</a></li>
    </ul>
  </li>
  <li><a href="#">Tuinen</a></li>

  <li class="meerWitruimte"><a href="grafische-vormgeving.html">Grafisch Vormgeving</a></li>
  <li><a href="#">Contact</a></li>    
</ul>

但我希望这些步骤能够直接传播到 .menu 内的所有 li(不是更深的层次)并动态传播。它应该是动态/自动的，而不是像我自己那样进行硬编码，以防菜单大小发生变化。

注意:
我希望每个 li 都有纯色。内部/后面不是渐变。

当前示例

<小时/>

我的想法是使用 jQuery 并使用 .count() 来计算所有 li 的数量，然后应用效果，但我没有成功。很可能是由于不够熟练。

Answer 1

我认为最好的方法是使用一些 JavaScript 来计算颜色。这也使得处理灵活数量的元素变得更加容易。您可以使用 jQuery 来完成此操作，但我认为普通 JavaScript 也同样简单。

我已经用注释记录了代码，并尝试通过注释解决您的其他请求。代码有点冗长。我已经通过几个步骤完成了颜色值的计算和生成，以清楚地显示所做的事情。您可以将其简化为更简短的计算，尽管我认为稍微冗长也无伤大雅。声明额外的变量并添加额外的代码行不会降低页面的性能。

var items = document.querySelectorAll('.menu > li');
var count = items.length;

for (var i = 0; i < count; i++) {
  // First, which step is this (between 0 and 1). This helps changing 
  // the formula to other kinds of values or gradients if you need to.
  var step = i / (count - 1);

  // Alpha value. 1 - X to reverse the value from 1 downto 0. 
  // X = step * 0.5, because you want from 100% to 50% instead of all the 
  // way down to 0%. If you would want from 100% to 75%, change this 
  // number to 0.25.
  var alpha = 1 - step * 0.5;

  // Build an rgba color value.
  var color = 'rgba(84,175,50,' + alpha + ')';
  console.log(color);

  // And set it.
  items[i].style.backgroundColor = color;
}

.menu > li {
  margin-bottom: 10px;
  padding: 5px;
  color: white;
}

<ul class="menu">
  <li>Dinges</li>
  <li>Danges</li>
  <li>Denges</li>
  <li>Dunges</li>
  <li>Donges</li>
</ul>