Jquery计算宽度和se div标签答案

【问题标题】：Jquery calculate widths and se div tagJquery计算宽度和se div标签
【发布时间】：2012-10-06 05:17:41
【问题描述】：

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

<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>

这是我目前所拥有的。我的包装器最大宽度为 972 像素

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

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


    console.log(percentage);
});

谁能帮帮我？

编辑：我添加了一个截图，所以你可以看到这个问题。第四个元素有一个左边距，这是不应该的。这就是为什么我要添加一个明确的

【问题讨论】：

如果每个网格元素浮动并具有相同的宽度，这不会自行排序。第四个元素将不适合，并将落在其他行下方的单独行上。鉴于您在包装器上有固定宽度。或者我在这里错过了什么？或者你对clear 类做的事情比清除浮动更多吗？
原因是在网格内我有一个 div 元素，左边有边距。使用一些 CSS，我声明第一个元素不应留有边距。当第四个元素下降时，由于浮动，它有一个左边距。因此，如果有一个明确的标签，我会知道何时设置另一个 margin-left: 0

标签： jquery grid

【解决方案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;
        }

    });

});

【讨论】：

它非常接近，几乎在那里。只有一个问题。它需要查看一个部分并执行每个部分。然后进入newxt并做一个。否则，不同部分的网格将被添加在一起。这会导致在不需要时添加清除。
我更新了你的提琴手，你可以看到有问题
Johansrk，感谢您的投票！）这是我第一次来到这里！）
哦，输入 cmets 正在发送））还需要一个家规！）好吧，我看到了你的版本，那里有一个小硬代码。我认为有很多方法可以优化这段代码！如果您有兴趣，我们可以在任何地方聊天。无论如何 - 它现在应该可以工作了！）
哦，这不是你的更新吗？我完全不同意这一点。现在我了解您的需求并尝试回滚和编辑代码。