Javascript 使用jquery根据列的累积宽度将列划分为组（行）

我有许多列（宽度不同）正在生成，我需要根据它们的宽度将它们分成组或行。每次列的累积宽度达到100%时，我都希望将这些列分组到一个新的div中

我请一位朋友帮我调查一下，他拿着这个回来了，但我还是无法让它工作。如果有人能提供任何帮助，我们将不胜感激

$.fn.gridRows = function() {
    var cumulativeWidth = 0;
    var items = [];
    $('.column',this).each(function(index){
        var col = $(this);
        col.data('index', index);
        var percentageWidth = (100 * parseFloat(col.css('width')) / parseFloat(col.parent().css('width')));
        cumulativeWidth += percentageWidth;
        items.push(index);
        if(cumulativeWidth >= 100){
            if(items.length == 1){
                col.wrap('<div></div>');
            }else{
                var selector = '*' + items.join('][data-index=').substring(1) +']';
                $(selector).wrap('<div></div>');
            }
            items = [];
            cumulativeWidth = 0;
        }
    });
}

$(document).ready(function() {
    $('body .group').gridRows();
});

$.fn.gridRows=函数（）{
var累积宽度=0；
var项目=[]；
$（'.column'，this）.each（函数（索引）{
var col=$（此值）；
列数据（“索引”，索引）；
var percentageWidth=（100*parseFloat（col.css（'width'））/parseFloat（col.parent（）.css（'width'））；
累积宽度+=百分比宽度；
项目推送（索引）；
如果（累计宽度>=100）{
如果（items.length==1）{
col.wrap（“”）；
}否则{
变量选择器='*'+项。联接（'][数据索引='）。子字符串（1）+']；
$（选择器）。换行（“”）；
}
项目=[]；
累积宽度=0；
}
});
}
$（文档）.ready（函数（）{
$（'body.group'）.gridRows（）；
});

我对它做了一些修改，但这对我来说很有用。至少，它将列分组到总宽度不超过100%的框中

$.fn.gridRows = function() {
    var cumulativeWidth = 0,
        columns = $('.column',this),
        rowItems = [];

    var group = function(items) {
        if (items.length) {
            $('<div></div>').insertBefore(items[0]).append(items);
        }
    }

    for (var i = 0, l = columns.length; i < l; ++i) {
        var $column = $(columns[i]),
            width = Math.round(100/$column.parent().width() * $column.width());

        if (cumulativeWidth + width > 100) {
            group(rowItems);
            cumulativeWidth = 0;
            rowItems = [];
        }
        cumulativeWidth += width;
        rowItems.push($column[0]);
    }

    group(rowItems);
}

$.fn.gridRows=函数（）{
var累积宽度=0，
columns=$（“.column”，this），
行项目=[]；
变量组=功能（项目）{
if（项目长度）{
$（''）.insertBefore（项目[0]）。追加（项目）；
}
}
对于（变量i=0，l=columns.length；i100）{
分组（项目）；
累积宽度=0；
行项目=[]；
}
累计宽度+=宽度；
rowItems.push（$column[0]）；
}
分组（项目）；
}

什么不起作用？有什么问题吗？你的问题是什么？它似乎没有添加div。我可以在firebug中看到它正在为.columns编制索引，如果我添加了一个警报以显示累积宽度，它达到100，然后重置，但从不添加所需的div。请尝试

alert（）

ing（或以其他方式跟踪）else块中的选择器，查看它是否采用您期望的值。当items.length==1时它能工作吗？如果我在items.length==1时发出警报（），我什么也得不到（尽管我应该基于HTML）。如果我alert（）else块的累积宽度远远超过100，那么根据HTML，最多应该加起来是100。它查看的HTML如下：