如何使用 JQuery 在特定点拆分 DIV？答案

【问题标题】：How do I split a DIV at a specific point using JQuery?如何使用 JQuery 在特定点拆分 DIV？
【发布时间】：2011-12-29 10:46:10
【问题描述】：

我正在编写一些 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>

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

【问题讨论】：

标签： jquery split height

【解决方案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));
    }
});

【讨论】：

如何将拆分后出现的元素添加到数组中？
使用空的 var set = $() 函数启动一个 jquery 集。然后使用JQuery add()函数添加每一项。

【解决方案2】：

我发现了同样的问题。 Anno 2014 我想出了这个解决方案

    var h = 60;
    var c = 0;
    $('#1').children().each(function () {
        c += $(this).height();
        if (h < c) {
            $(this).appendTo('#2');
        }
    });

【讨论】：

【解决方案3】：

即使您的要求略有不同，但this 可能会对您有所帮助。下载 zip 文件并在浏览器中打开 html 文件，然后单击按钮。它会自动划分html内容。

【讨论】：