Question

我在这里有点困惑。我正在研究一个动态项目，我想应用不同的CSS 具有相同类但没有id的div。我如何应用不同的css说同一个类的第一个div，然后不同的CSS到同一类的第二个div等等...... 我们说fullwidthContainer课适用于 3 divs 对于第一个div，我想要宽度1000px，到第二个我想要 800px ，依此类推。 我不能在这里提供id或其他课程，因为它是动态生成的。请帮忙。

感谢。

好的，我使用javascript

这样做了

  function emphatic()
{
    var totalContainers=document.getElementsByClassName('fullwidthContainer')
    var className=1;

    for (var i = 0; i < totalContainers.length; i++) {
        className=className+1;
        totalContainers[i].setAttribute("class", "dropdown_5columns fullwidthContainer customMenuClass");
    };

}
emphatic();

现在我如何追加每次添加1到新类的classname。 我的意思是像customclass1，customclass2等等到divs ..谢谢，

Answer 1

也许您可以使用元素索引，但是如果您有匹配的关系则不完全清楚：

使用基于索引的增量的示例：

$('.someClass').each(function(index){
  $(this).width( 300 * (index+1) );
});

使用数组的示例：

var widths =[ 600, 900, 500];

$('.someClass').each(function(index){
  $(this).width( widths[index] );
});

也可以调整数组版本来添加类。

索引从零开始，是页面

中的第一个匹配元素

Answer 2

也许你对纯粹的JavaScript解决方案很感兴趣。

var divs = document.getElementsByClassName('myClass');
var width = [100,200,300];
for(var i=0;i<divs.length;i++) {
    divs[i].style.width = width[i] + 'px';
    // increases classname by i
    divs[i].className = 'myClass anotherClass' + i;
}

如何在dom中获取元素并应用不同ID的不同css？

2 个答案: