拆分长串入mutltiple动态的div

我想，当div的高度达到一定长度的长字符串分割成mutltiple动态的div。下面是我认为应该工作的代码：拆分长串入mutltiple动态的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，而不是更新的高度。我在这里错过了什么？如果我按长度分割，它的工作很好，但这不适合我想要做的事情。

来源

2013-03-15 Jeight

当一个“回流”，会触发浏览器只重新计算页面的布局。这些通常在计算上非常昂贵，所以某些浏览器（特别是Chrome）将等到JS方法执行完毕（或者有异步调用）才能执行回流。正因为如此，div可能不会调整，直到你的函数完成执行。请参阅https://developers.google.com/speed/articles/reflow – Basic 2013-05-10 00:01:33

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

用途：

elem.height()

来源

2013-03-15 18:12:17

我试过。仍然不起作用。它应该以任何方式工作，但是... – Jeight 2013-03-15 18:19:11

直到它插入到DOM后元素才会有高度。所以循环中发生的事情是，你仍然在看内存中的'elem'的值，而不是DOM。 – 2013-03-15 18:25:11

我可以除此之外，但必须有一种方法使其工作。有什么建议么？ – Jeight 2013-03-15 18:45:33

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

来源

2013-03-15 18:35:34

这是一个更清洁的写法。谢谢，但它仍然有同样的问题。 – Jeight 2013-03-15 18:46:54

看来，这是由编码的位置造成的。出于某种原因，如果我在另一个JavaScript插件的编码之前使用了该代码，那么高度总是返回为0.通过将代码放在另一个脚本后面，创建了div。现在唯一的问题是，尽管创建了divs，但似乎无法使用插件，而#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被忽略，最终可能不得不张贴另一个问题相对于这一个。感谢大家！

来源

2013-03-15 19:57:27 Jeight

拆分长串入mutltiple动态的div

回答

相关问题