Question

更新：修改并编辑了一些您在下面指出的明显问题。我变暖了吗？

$(document).ready(function(){

   var totaldivs = $('.feature').length;

   if (totaldivs == 3){

removeClass().addClass('three-features');

   } else if(totaldivs == 2){

removeClass().addClass('two-features');

   } 

});

我是JavaScript / JQuery的新手，所以也许我在这里尝试做的是悲剧性的缺陷但是我想制作一个脚本来检查页面上某个类的div有多少并且更改这些div的宽度基于存在的数量。我计划通过在检查div数组的长度后将div的类更改为具有不同宽度的类来实现此目的。

我在哪里错了？

我知道我必须在IE中找出getElementsByClassName的另一个解决方案。

这是我的js：

var totaldivs = document.getElementsByClassName('feature');

$(document).ready(function(){

    if (features.length==3){

    $('.features').removeClass().addClass('three-features');

  } else if(features.length==2){

    $('.features').removeClass().addClass('two-features');

  } 

});

这是我的CSS

.feature {
float: left;
}
.two-features {
float: left;
width: 100px;
}
.three-features {
float: left;
width: 50px;
}

Answer 1

您定义totaldivs，但使用您未定义的features。我会这样做：

var counts = ['one', 'two', 'three'];

$(document).ready(function() {
    var $features = $('.features');
    var className = counts[$features.length - 1] + '-features';

    $features.removeClass().addClass(className);
});

Answer 2

确保在文档准备就绪后分配totaldivs。

$(document).ready(function(){    
    var totaldivs = $('.feature').length;
    // and do something smarter like @Blender pointed out
}

PS：使用Jquery进行样式设置总是一个坏主意，它会在您的应用扩展时杀死您。
考虑使用css：
显示：table-cell等。

根据页面上带有jquery的div数改变div的宽度

2 个答案: