jquery - 如何使用 JQuery 在特定点拆分 DIV？

Question

我正在编写一些 JQuery 以在特定高度分割一些 html 代码。html 是用户生成的，并且可能包含图像，所以我想不出一个好的方法来执行此服务器端。

我有一些生成的 HTML，如下所示:

<div id="1"> 
  <p>Some Text</p>
  <p>Some More Text</p>
  <p>Even More Text</p>
  <p>Enough Text</p>
  <p>Too Much Text</p>
</div>
<div id="2">
</div>

我希望 HTML 最终看起来像这样:(在内容达到 60 像素高之前分割内容)

<div id="1"> 
  <p>Some Text</p>
  <p>Some More Text</p>
  <p>Even More Text</p>
  <p>Enough Text</p>
</div>
<div id="split">
  <p>Too Much Text</p>
</div>
<div id="2">
</div>

我写了这个 JQuery:我想我可能需要使用 .after ，或者以某种方式引用容器 div 并关闭它。 $(this).parent 还是 $(this).closest() ？

var h = 60;
/*Run when (item) is bigger than height.
Check and sum height of each base element, break up into 'h' px high divs*/

function pagebreak(item, h) {
    var st = 0; //st = space total
    $(item).children().each(function(i, l) {
        if (st + $(this).height() <= h) {
            st = st + $(this).height();
        } else {
            $(this).append('</div><div id="split">');
            st = 0;
        }
    });
}

$('div').each(function() {
    var len = $(this).first().height();
    if (len >= h) {
        pagebreak($(this), h);
    }
});

但它返回 HTML 像这样:

<div id="1">
    <p>Some Text</p>   
    <p>Some More Text</p>   
    <p>Even More Text</p>   
    <p>Enough Text<div id="split"></div></p>   
    <p>Too Much Text</p> 
</div>
<div id="2">
</div>

非常感谢任何帮助。我在函数中真正想说的是用新的 div 在 $this 处拆分项目。提前致谢。
关于 StackOverflow 的第一个问题，如果我做错了什么，很抱歉。

Answer 1

我会更改您的pagebreak函数以返回分割点之后出现的一组元素。称之为GetElementsAfterSplit()。

然后你可以这样做:

$('div').each(function() {
    var len = $(this).first().height();
    if (len >= h) {
        var splitElements = GetElementsAfterSplit();

        // move elements from old location to new
        splitElements.remove();
        $(this).after($("<div class=\"split\"></div>").append(splitElements));
    }
});