jquery - 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;
        }

    });

});