根据页面上的 div 数量使用 jquery 更改 div 的宽度答案

【问题标题】：change width of divs depending on the number of divs on page with jquery根据页面上的 div 数量使用 jquery 更改 div 的宽度
【发布时间】：2013-07-24 16:50:28
【问题描述】：

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

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

【问题讨论】：

一方面，您使用 totaldivs 作为变量，然后您使用的是功能。这将为空。
你从不使用totaldivs。 feature 或 features ？从未指定要删除的类removeClass()
@JayHarris：不向.removeClass() 传递任何参数会删除所有类。
@Blender 假设他没有在该 div 中设置其他类，那么我的声明应该被忽略
totaldivs = $('feature').length

标签： javascript jquery css arrays dynamic

【解决方案1】：

确保在文档准备好后分配总div。

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

PS：使用 Jquery 进行样式设计总是一个坏主意，当您的应用程序扩展时它会杀死您。
考虑使用css，如：
display:table-cell 等

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：