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

当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] + ' ');
        }
    }
});

$（文档）.ready（函数（）{
var arr=长字符串分割（“”）；
$（“#书页”）。追加（“”）；
元素=$（'续'）；
对于（i=0；arr.length>i；i++）{
元素附加（arr[i]+''；
如果（元素文本（）高度>475）{
$（“#书页”）。追加（“”）；
元素=$（'续'+i）；
元素附加（arr[i]+''；
}
}
});

问题是它将div高度读取为0，而不是更新后的高度。我错过了什么？如果按长度分割，效果很好，但这不符合我的要求。

elem.text（）.height

不会给出高度，它会给出未定义的高度

使用：

$（函数（）{
变量l，i=0，arr=longishstring.split（“”），
元素=$（''）。附加到（“#书页”）；
对于（l=arr.length；l>i；i++）{
元素附加（arr[i]+''；
如果（元素高度（）>475）{
元素=$（''）。附加到（'#书页'）；
元素附加（arr[i]+''；
}
}
});

这似乎是由编码的位置引起的。出于某种原因，如果我在编写另一个javascript插件之前使用了该代码，那么高度总是返回为0。通过将代码放在另一个脚本后面，就创建了div。现在唯一的问题是，尽管创建了div，但是div似乎不能与插件一起工作，而bookpages的CSS被忽略了。我最终使用了乔·约翰逊版本的剧本中的大部分，并融入了我自己的风格

    $(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] + ' ');
        }
      }
    });

$（函数（）{
变量l，i=0，arr=longishstring.split（“”）；
$（“#书页”）。附加（“”）；
元素=$（'续'）；
对于（l=arr.length；l>i；i++）{
元素附加（arr[i]+''+元素高度（）；
如果（元素高度（）>200）{
$（“#书页”）。附加（“”）；
元素=$（'续'+i）；
元素附加（arr[i]+''；
}
}
});

---

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

在将元素插入DOM之前，该元素将没有高度。所以，在你的循环中发生的事情是，你仍然在寻找内存中的'elem'值，而不是DOM。我可以这样做，但必须有办法让它工作。有什么建议吗？将元素插入DOM并使用负文本缩进技巧隐藏它（文本缩进：-9999px尝试使用display:block；），然后进行测量。这是一种更干净的写入方法。谢谢，但它仍然存在相同的问题。浏览器仅在触发“回流”时才重新计算页面布局。这些通常在计算上非常昂贵，因此某些浏览器（尤其是Chrome）将等待JS方法完成执行（或者有一个异步调用）才能执行回流。因此，在函数完成执行之前，div可能不会实际调整大小。看见

$(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] + ' ');
        }
    }
});

    $(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] + ' ');
        }
      }
    });