在灵活数量的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>

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

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

当前样本

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

Answer 1

我认为最好的方法是使用一些JavaScript来计算颜色。这也使得处理灵活数量的项目变得更加容易。你可以使用jQuery来做到这一点，但我认为vanilla JavaScript同样容易。

我已将相关代码记录在案，并尝试通过评论解决您的其他请求。代码有点冗长。我已经通过几个步骤完成了颜色值的计算和生成，以清楚地显示所做的事情。你可以把它归结为一个更简短的计算，虽然我认为有点啰嗦是不会有害的。声明一个额外的变量并拥有额外的代码行不会导致页面性能下降。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是我使用JQuery的方法。

See Demo - ＆gt;根据评论更新

<强> JS

$(function() {
  var itemNum = $('li').size(); // count number of elements

  $('li').each(function(index, value) {

    // adjust the gradient: itemnumber / total items / 2
    // since we want to only do the gradient from 100% to 50% we divide by 2
    var gradient = 1 - ((index + 1) / itemNum) / 2;

    $(value).css('background-color', 'rgba(84, 175, 50,' + gradient + ')');
  });
});

<强> HTML

<ul class='menu'>
  <li>Home</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
</ul>

Answer 3

虽然CSS不会动态调整菜单项的数量，因此它可能不适合您的需求，但它会比浏览器在每次页面加载时运行的JavaScript更高效。您始终可以生成比您需要的更多样式，以确保其他菜单项可以获得背景。

作为参考，这里的SCSS将创建必要的样式：

$menuCount: 6;
$menuColor: #339933;

@for $i from 1 through $menuCount {
  li:nth-child( #{$i} ) {
    background-color: lighten( $menuColor, ( $i * 5 ) );
    }
}

Answer 4

稍微包装@goleztrol的代码，并减少LOC。

var links = document.querySelectorAll("li");

[].slice.apply(links).forEach(function(li,i){
  var step = i / (links.length - 1);
  var alpha = 1 - step * 0.5;
  li.style.backgroundColor = 'rgba(0,155,0,' + alpha + ')';
});