javascript - 根据元素数量划分元素宽度

Question

正如标题所说“根据元素数量划分元素宽度”我想要一个类似进度条的栏，我可以在其中添加元素，并且根据我拥有的元素数量，进度条会拆分。

现在这是固定值(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>

在我的 CSS 中，我的固定值是:

.progress-part-mid
{
    height: 100%;
    width: 34%;
    background-color: #52ff00;
    opacity: 0.9;
    display: block;
    float:left;
}

.progress-part-left
{
    height: 100%;
    width: 33%;
    background-color: red;
    opacity: 0.9;
    display: block;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    float:left
}

.progress-part-right
{
    height: 100%;
    width: 33%;
    background-color: yellow;
    opacity: 0.9;
    display: block;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    float:right;
}

Answer 1

你在找这样的东西吗？

http://jsfiddle.net/FK7N5/

您想选择所有元素，并用它来计算百分比。

容器中包含多少元素并不重要。只要确保他们都有一个共同的类，比如“进步”。请记住，您可以在一个元素上拥有多个类，因此您可以拥有 <div class="progress progress-first">或 <div class="progress progress-middle"> .

让它工作的 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) + '%');
});