Question

当div的高度达到一定长度时，我正在尝试将长字符串拆分为多个动态div。这是我认为应该工作的代码：

$(document).ready(function () {
    var arr = longishstring.split(' ');
    $('#bookpages').append("<div id='cont'></div>");
    elem = $('#cont');
    for (i = 0; arr.length > i; i++) {
        elem.append(arr[i] + ' ');
        if (elem.text().height > 475) {
            $('#bookpages').append("<div id='cont" + i + "'></div>");
            elem = $('#cont' + i);
            elem.append(arr[i] + ' ');
        }
    }
});

问题在于它将div高度读为0而不是更新的高度。我在这里错过了什么？如果我按长度分割它可以正常工作，但这对我想做的事情不起作用。

Answer 1

$(function(){
    var l, i = 0, arr = longishstring.split(' '),
        elem = $('<div id="cont"/>').appendTo("#bookpages");
    for (l = arr.length; l > i; i++) {
        elem.append(arr[i] + ' ');
        if (elem.height() > 475) {
            elem = $('<div id="#cont'+i+'"/>').appendTo('#bookpages');
            elem.append(arr[i] + ' ');
        }
    }
});

Answer 2

elem.text().height不会给你高度，它会给你undefined。

使用：

elem.height()

Answer 3

这似乎是由编码的放置引起的。出于某种原因，如果我在编写另一个javascript插件之前使用该代码，则高度始终返回为0.通过将代码放在另一个脚本后面，创建了div。现在唯一的问题是虽然创建了div，但似乎没有使用插件，＃bookpages的CSS被忽略了。我最终使用了Joe Johnsons版本的大部分脚本和我自己的风格。

    $(function() {
    var l, i = 0, arr = longishstring.split(' ');
      $("#bookpages").append('<div id="cont"></div>');
      elem = $('#cont');
      for (l = arr.length; l > i; i++) {
        elem.append(arr[i] + ' ' + elem.height());
        if (elem.height() > 200) {
          $("#bookpages").append('<div id="cont'+i+'"></div>');
          elem = $('#cont' +i);
          elem.append(arr[i] + ' ');
        }
      }
    });

我将不得不研究为什么CSS被忽略，并最终可能要发布与此相关的另一个问题。谢谢大家！

将长字符串拆分为多个动态div

3 个答案: