Javascript 根据元素数量划分元素宽度

正如标题所说“根据元素数量划分元素宽度” 我想有一个进度条，我可以添加元素，并根据我有多少元素进度条将分裂

这是现在的固定值（33%、33%和34%），我希望它们根据我使用的元素数量而改变

比如，如果我的列表中有4个元素，我希望它能自动与4等分。有什么简单的方法吗？也许只使用CSS？我不介意javascript，但我只是说它可能是我错过的：）

编辑： 我创建了3个div，并给他们所有不同的类

<section class="progress-part-list">
    <div class="progress-part-left">
        
    </div>
    
    <div class="progress-part-right">
        
    </div>
    
    <div class="progress-part-mid">
        
    </div>
</section>

---

作为一个过度使用javascript的人，首先想到的是在加载时运行一些javascript，然后它可以遍历周围元素的“child”属性（带有class

progress part list

），然后除以100，然后将样式设置为该值

下面是一些可以实现这一点的代码：

<script type="text/javascript">
var divd=100/(document.getElementsByClassName('progress-part-list')[0].children.length);
[].forEach.call(document.getElementsByClassName('progress-part-list')[0].children,function(curChild){
    curChild.style.width=divd+'%';
});
</script>

var divd=100/（document.getElementsByClassName（'progress-part-list'）[0].children.length）；
[].forEach.call（document.getElementsByClassName（'progress-part-list'）[0]。子项，函数（curChild）{
curChild.style.width=divd+'%'；
});

将其放在

这是非常粗糙的，但是，您可能希望修复它以使其更加优雅（例如修改类样式而不是内联样式，遍历所有内容而不仅仅是第一个

进度零件列表

，等等）

---

它也是未经测试的

尝试给每个内部元素一个-4px的边距权限，并使用以下JS/jQuery：

$(document).ready(function(){
    $('div div').width($('div:first-child').width() / 3);
});

这是一把小提琴：

这就是你要找的吗

---

请原谅内联样式。我这样做是为了节省时间。

你在找这样的东西吗

您希望选择所有元素，并使用这些元素计算百分比

容器中包含多少元素并不重要。只要确保它们都有一个公共类，如“progress”。记住，一个元素上可以有多个类，因此可以有

或

要使jQuery正常工作，请执行以下操作：

// Get all parts of the progress bar.
var bars = $('.bar');

// With each one, calculate the percentage and apply the width.
bars.each(function()
{
    $(this).css('width', (100 / bars.length) + '%');
});

---

我以前的一个问题有用吗？是关于布局的；这样做既不会损害语义也不会损害元素^^编辑：ed我的问题。这就是我现在的问题。固定值。我想我可以给他们100%，并且以一种神奇的方式，他们都会看到还有其他元素，并自动改变：）@FelipeAls我正要用一些简单的javascript来回答这个问题，但是你的链接答案太棒了。“我不知道这样的巫毒存在。”费利皮尔斯有着和我一样的想法，尽管毫无疑问，它的表现更加优雅。不管怎样，下面是我制作的演示，演示了使用display

表格单元格的原理：@FelipeAls将您的答案写为答案，这样我就可以将其切换为答案：）Ty回答我：）也将试用您的代码：）我想他希望容器的宽度一致。。。向您的添加元素不会调整其他元素的大小：是的，我假设容器中只有三个div。你说得对，可能不是这样。OP提到了这一点。我太匆忙了。你的答案我同意。
// Get all parts of the progress bar.
var bars = $('.bar');

// With each one, calculate the percentage and apply the width.
bars.each(function()
{
    $(this).css('width', (100 / bars.length) + '%');
});