Jquery 容器中的每个div都比上一个div更不透明

我想创建一行div，每个div都有一个比前一行更不透明的背景色。创建一种渐变

为了为每个div生成不同的不透明度，我创建了一个使用所述div的ID的变量。但这并没有产生任何有用的结果。遗憾的是，在不了解所有基本知识的情况下承担了太多

$(document).ready(function(){

    $("div").each(function(index, value) { 

        var ids = $(this).attr('id');
        var opa = ids/10

        $("div").css("background-color", "rgba(255, 255, 255, "+opa+")");

    });

});

---

谢谢你的帮助

你就快到了！分配背景色时，

$（“div”）

应该是

$（this）

，因为您不想在所有元素上设置它，而只在当前元素上设置它

$（函数（）{
$（“div”）。每个（函数（索引，值）{
var id=$（this.attr（'id'）；
var-opa=ids/10；
css（“背景色”，“rgba（255255255，“+opa+”））；
});
});
正文{
背景色：#000；
}
.盒子{
显示：内联块；
宽度：50px；
高度：100px；
}
最主要的是，使用
$（'div'）.css（'background-color'）…
，您可以通过再次循环设置所有
的背景色。请尝试将其更改为：

$（this.css（'background-color'，'rgba（255,255,255，'+opa+'））；

这样，
$。每个
函数都将获得ID，并将计算出的值分配给循环中的当前
。我认为这听起来像是您正在寻找的

此外，从技术上讲，ID值必须以字母（大写或小写）开头。
data
属性可能是放置所需值的更好位置。例如：

<div data-opacity="1">

或

示例：
另一种方法是不使用索引或值，而是使用div元素本身，因为通过使用id，您可以将自己限制为使用id放置的div的物理数量。下面是我要说的：

$(document).ready(function(){
    $('div').css('background-color', 'black');

    var numDiv = 0;
    var totalDiv = 0;
    $("div").each(function(){
        totalDiv ++;
    });
    $("div").each(function() { 
        var opa = numDiv/totalDiv;
        var colorrgba = 'rgba(0, 0, 0, ' + opa + ')';
        $(this).css("opacity", opa);
        numDiv++;
    });
});

通过上面的代码，我们可以看到您可以添加任意多个div，并且需要按照div总数的特定div顺序来定义每个div的不透明度（因此您将具有一致的渐变）

首先，您将css应用于所有div，而不是循环指向的当前div。然后，您希望将100%不透明度值（1）除以屏幕上的div总数。然后，每次迭代都将分割后的数量添加到运行总数中，并将其作为不透明度值应用

$(document).ready(function(){

    var length =  1 /  $("div").length,
        opaTot = length,
        opa = length; //Complete opacity is 1

    $("div").each(function(index, value) { 

        var ids = $(this).attr('id');
        $(this).css("background-color", "rgba(255, 255, 255, "+opaTot +")");
        opaTot += opa;

    });

});

这里有一把小提琴来测试我的例子。
实际上，这可以通过纯Javascript轻松实现：

var opa=0.3；
var divs=document.getElementsByClassName（'opacity'）；
对于（i=0；i是否将元素的id设置为数字？看起来您正在将每个元素应用于每个div。请尝试将背景色设置为
$（此）
取而代之。是的@BuddhistBeast。谢谢，Chad！@eskimoproverb您可能需要更改计算不透明度的方法，因为除以10，在达到最大不透明度1之前，您将自己限制为10个div，之后的每个div都是相同的颜色（因为不透明度已被最大化）考虑一下我在下面的回答中所说的方法，在这个方法中，你可以有多个你想要的div，梯度甚至会从第一个div完全变白，最后一个完全是黑色的。另外一种方法比我想象的更接近。哈！谢谢大家。Graag gedaan！嗨！感谢您提供更好的选择。：）
$(document).ready(function(){
    $('div').css('background-color', 'black');

    var numDiv = 0;
    var totalDiv = 0;
    $("div").each(function(){
        totalDiv ++;
    });
    $("div").each(function() { 
        var opa = numDiv/totalDiv;
        var colorrgba = 'rgba(0, 0, 0, ' + opa + ')';
        $(this).css("opacity", opa);
        numDiv++;
    });
});

$(document).ready(function(){

    var length =  1 /  $("div").length,
        opaTot = length,
        opa = length; //Complete opacity is 1

    $("div").each(function(index, value) { 

        var ids = $(this).attr('id');
        $(this).css("background-color", "rgba(255, 255, 255, "+opaTot +")");
        opaTot += opa;

    });

});

var opa=0.3;
var divs = document.getElementsByClassName('opacity');

for (i=0; i<divs.length; i++) {



    (function () {

        divs[i].style.opacity = opa;
        opa+=0.3;
    })();

}