Jquery 在灵活的div'；s

我有一个菜单，每个

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

，然后应用效果，但我没有成功。很可能是因为技术不够熟练

我认为最好的方法是使用一点JavaScript来计算颜色。这也使得处理数量灵活的项目变得更加容易。您可以使用jQuery来实现，但我认为香草JavaScript同样简单

我已经用注释记录了代码，并试图从注释中解决您的其他请求。代码有点冗长。我已经在几个步骤中完成了颜色值的计算和生成，以清楚地显示所做的工作。你可以把它简化为一个更简单的计算，尽管我认为稍微罗嗦一点也无妨。声明一个额外的变量并拥有一行额外的代码不会降低页面的性能

var items=document.querySelectorAll（'.menu>li'）；
var count=items.length；
对于（变量i=0；i

.menu>li{
边缘底部：10px；
填充物：5px；
颜色：白色；
}

丁格斯
危险
丹格斯
邓格斯
东芝

这是我使用JQuery的方法

->根据评论更新

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>

家
两个
三
四
五
六
七

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

以下是创建必要样式的SCS供参考：

$menuCount: 6;
$menuColor: #339933;

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

---

稍微打包@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 + ')';
});

---

似乎在最后一个菜单子选择器前面有一个不需要的

d

字母，或者我错了吗？我的菜单实际上是用荷兰语写的，实际上应该是“hoofdMenu”，翻译成“main menu”。我忘了一个D。我这样做是为了英语翻译：）谢谢你的提示荷兰语不是问题，但是请在问题中添加HTML。你有没有想过使用CSS预处理器，比如Sass，来创建样式？您可以使用for循环（请参见：）来创建CSS。Sass还具有颜色函数，可用于迭代渐变。jQuery听起来不是一个好主意，因为它会在用户端增加不必要的开销。@Darren我认为如果它满足了这个问题，这不会是一个问题。我同意SASS比jQuery（已经在使用中）是一个更好的选择，但没有想到这一点。去吧，谢谢！第一行，如果只在

内选择第一级
li
。菜单

？：）如果你只想要第一级，那么是的。在你发布HTML之前，我已经在打字了。哦，还有一个快速更新：是否可以将它从255降到120（或100%降到50%），而不是从100%/255降到0？是的，我已经更改了它。它现在使用RGBA，透明度在1到0.5 alpha之间。完美！如果您希望看到结果（在较长的菜单上）：如果您使用“gradient”作为关键字，您可以使用一个，因此它也可以塑造li；）（内部js）不透明度为0.9到0.3，并且固定为项目数。如果您有超过8个，则最后一个将全部为白色。@GCyrillus fair comments。。。只是为了一个快速的演示而不是一个完整的解决方案。。。将用建议更新答案-thanks@GolezTrol，好吧，它基本上可以工作，下一个改进将是，实际上，在降低不透明度颜色之前计算lis；）那好多了。它现在生成的梯度下降到50%，而不管项目的数量。但它不是从100%开始，而是从（我认为）100%-（50%/items.count）开始。