Question

我正在尝试将较大的html页面拆分为较小的固定高度和宽度块（页面）。

如果我知道页面数量很容易 - 我可以先生成所需数量的页面然后用源内容填充它们：

children = $('#source').children();
width = 600;
height = 600;

// already generated 'pages'
divs = $('.page');
$(divs).width(width);

pages = divs.length;
i = 0;

for (var c = 0; c < pages; ++c) {

    var div = $(divs).eq(c);

    while (i < children.length && div.height() < height) {
        $(children[i++]).clone().appendTo(div);
    }

    if(div.height() > height) {
        div.contents().last().remove();
        i--;
    }

}

但是，如果我不知道页数是多少，我怎么能做同样的事情呢？如何使用$（'div.page'）包装内容并继续添加页面，直到我到达内容结尾？

感谢

Answer 1

您可能希望使用循环来继续创建页面/用内容填充它们，直到您点击某个端点，在那里您将脱离循环。这里的关键是在循环中动态创建页面div。您可以使用document.createElement或简单地使用$（“”）（或其他jQuery方式）。像这样：

var i = 0;   
while(true) {
        if (content  /* have more content */) {
            var page = document.createElement("div");
            $(page).addClass('page');
            var children = $(content).children();
            while (i < children.length && div.height() < height) {
                $(children[i++]).clone().appendTo(page);
            }
            $(body).append(page);
        } else {
            break;
        }
    }

如果您已经定义了要添加到每个“页面”的内容块，您可能还想使用jQuery的每个方法。

评论是否需要更多帮助。

使用jQuery将html内容拆分为固定的高度和宽度div

1 个答案: