Jquery计算宽度和se div标签

Question

我正在为网站做网格系统。标记看起来像这样

<div class="section">
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
</div>
<div class="section">
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
</div>  

班级网格的宽度为33.3333333333％。

每次网格总和达到100或接近100％时，我想插入一个div。这样标记看起来像这样

<div class="section">
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
        <div class="clear"></div> <!-- inserted div -->
    <div class="grid">

    </div>
</div>
<div class="section">
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
       <div class="clear"></div> <!-- inserted div -->
</div>  

这是我到目前为止所拥有的。我的包装器最大宽度为972px

var grid = $('.grid');
var wrapper = $('.wrapper').width();

$(grid).each(function () {
    var gridWidth = $(this).width();
    var percentage = (gridWidth / wrapper)*100;


    console.log(percentage);
});

任何人都可以帮助我吗？

编辑： 我添加了截图，因此您可以看到问题。第四个元素有一个左边距，这是不应该的。这就是为什么我要添加清晰的原因

Answer 1

首先，请注意代码中的一些差异。在HTML中你正在使用“section”类，在jQuery中你选择“.wrapper”。

而且你应该尝试这样的事情：

$('.section').each(function() {

    var rowPixels = 0;
    $(this).find('.grid').each(function () {

        var gridWidth = $(this).width();
        rowPixels += gridWidth;

        if (rowPixels >= $('.section').width()) {
            $(this).after('<div class="clear"></div>');
            rowPixels = 0;
        }

    });

});