jQuery功能麻烦 [英] jQuery function trouble

问题描述

我试图制作一个脚本，将容器内的元素放入列中。该脚本工作正常，直到我到4列。我看不到我要去哪里错了。以下是代码和演示

I'm trying to make a script to put the elements inside a container into columns. The script works fine until I get to 4 column. I can't see where I'm going wrong. Here's the code, and the 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++;
        }
    }
}

推荐答案

$(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之后包含一个数字。否则，代码可能看起来像它的工作，但实际上不是。

Also, change your test data to include a number after every Lorum or Duis. Otherwise, the code may look like its working but really not be.

这种技术也适用于任何数量的列（而不仅仅是4列）。

This technique also works for any number of columns (rather than just 4 columns).

这篇关于jQuery功能麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！