Javascript jQuery-向不同数量的div添加类

我是Stackoverflow的新手，我想知道是否有人能帮我解决这个问题：

我希望有不同的块（“.item wrapper”），其中包含项目（“.item”）。但是块内的项目需要可变宽度

例如： 如果块包含4个项目，则项目的宽度需要为25%
如果块包含5个项目，则项目的宽度需要为20%
如果块包含6个项目，则项目的宽度需要为16.66….%
如果块包含7个项目，则项目的宽度需要为14.28….%

我希望有人能帮我

这里有一个JSFIDLE吗

jsfiddle.net/carloc/4cjwqpf4/2/

---

谢谢大家!

这不需要javascript…CSS可以帮你

   .item-wrapper {
      display: table;
      width: 100%;
    }
    .item-wrapper .item {
      display: table-cell;
    }

。项目包装器{
显示：表格；
宽度：100%；
}
.item包装器.item{
显示：表格单元格；
宽度：自动；
边框：1px纯红；
颜色：红色；
高度：50px；
填充：10px；
}
.项目包装。项目：第n个子项（奇数）{
边框颜色：蓝色；
颜色：蓝色；
}

测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试

这不需要javascript…CSS可以帮你做到

   .item-wrapper {
      display: table;
      width: 100%;
    }
    .item-wrapper .item {
      display: table-cell;
    }

。项目包装器{
显示：表格；
宽度：100%；
}
.item包装器.item{
显示：表格单元格；
宽度：自动；
边框：1px纯红；
颜色：红色；
高度：50px；
填充：10px；
}
.项目包装。项目：第n个子项（奇数）{
边框颜色：蓝色；
颜色：蓝色；
}

测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试

您可以使用CSS，也可以使用Javascript：

JS代码：

$( document ).ready(function() {        
    $( ".item-wrapper" ).each(function( index ) {
        var clen=$(this).children().length;     

            $(this).children('div').each(function () {
                $(this).addClass('col'+clen);
            });         

    });      

});

CSS:

---

CSS类不以数字开头。：）

您可以使用CSS，也可以使用Javascript：

JS代码：

$( document ).ready(function() {        
    $( ".item-wrapper" ).each(function( index ) {
        var clen=$(this).children().length;     

            $(this).children('div').each(function () {
                $(this).addClass('col'+clen);
            });         

    });      

});

CSS:

---

CSS类不以数字开头。：）

我用JavaScript为您制作了以下内容：

经过测试，效果良好。（您可以通过添加更多div来测试它。）

JavaScript:

 var divAmount = $('.item-wrapper > .item').length;

    if (divAmount === 4) {
        $('.item').css('width', '25%');
    } else if (divAmount === 5) {
        $('.item').css('width', '20%'); 
    } else if (divAmount === 6) {
        $('.item').css('width', '16.66%'); 
    } else if (divAmount === 7) {
        $('.item').css('width', '14.28%'); 
    };

---

我用JavaScript为您制作了以下内容：

经过测试，效果良好。（您可以通过添加更多div来测试它。）

JavaScript:

 var divAmount = $('.item-wrapper > .item').length;

    if (divAmount === 4) {
        $('.item').css('width', '25%');
    } else if (divAmount === 5) {
        $('.item').css('width', '20%'); 
    } else if (divAmount === 6) {
        $('.item').css('width', '16.66%'); 
    } else if (divAmount === 7) {
        $('.item').css('width', '14.28%'); 
    };

---

我对这个问题的解决办法是：

$( document ).ready(function() 
{
  $(".item-wrapper").each(function()
  {
    c = $(this).children().length;

    $(this).children().each(function(){
        $(this).css("width", (100 / c) + "%");
    }); 
  });
});

通过在所有“itemwrapper”类上循环，然后获取itemwrapper的子级（使用$（this））。根据项目包装器的子项数量为它们指定宽度值

---

通过正确的计算，您可以得到所需的值。在这种情况下，它的100%除以孩子的数量

我解决这个问题的方法是：

$( document ).ready(function() 
{
  $(".item-wrapper").each(function()
  {
    c = $(this).children().length;

    $(this).children().each(function(){
        $(this).css("width", (100 / c) + "%");
    }); 
  });
});

通过在所有“itemwrapper”类上循环，然后获取itemwrapper的子级（使用$（this））。根据项目包装器的子项数量为它们指定宽度值

通过正确的计算，您可以得到所需的值。这个例子是100%除以孩子的数量