Question

我正在尝试制作一个脚本，将元素放入容器中。该脚本正常工作，直到我到达4列。我看不出我哪里错了。这是代码，demo

var container = '.bar',
    children = $(container).children().length,
    column = 4,
    width = $(container).width() / column - 20;

function columnizer(value) {

    var i = 1,
        x = Math.ceil(value / column),
        z = Math.round(value / column),
        y = '<div class="column" />';

    $(container).children().slice(0, x).wrapAll(y);

    while (i < column) {
        if (value % 2 === 0 && z === 1 ) {
            $(container).children().slice(i, x * i).wrapAll(y);
            i++;
        }
        else if (value % 2 === 0 && z > 1) {                
            $(container).children().slice(i, x + i * i).wrapAll(y);
            i++;            
        }
        else {
            $(container).children().slice(i, x + i).wrapAll(y);
            i++;
        }
    }
}

Answer 1

$(function() {

var container = '.bar',
    children = $(container).children().length,
    column = 4,
    width = $(container).width() / column - 20;

function columnizer(value) {
    var i = 0,
        x = Math.ceil(value / column),
        z = Math.round(value / column),
                y = '<div class="column" />';

    while (i < column ) {   
        $(container).children(':not("div.column")').slice(0, x).wrapAll(y);
        i++;
        }
}

columnizer(children);

$(container).append("<div class='clear'></div>");

$('.column').width(width);

});

此外，更改您的测试数据以在每个Lorum或Duis之后包含一个数字。否则，代码可能看起来像它的工作但实际上不是。

此技术也适用于任意数量的列（而不仅仅是4列）。

jQuery功能麻烦

1 个答案: