Как разделить DIV в определенной точке с помощью JQuery?

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>

Любая помощь очень ценится.Что я действительно хочу сказать в своей функции, так это разделить элемент на $ this с новым div.Заранее спасибо.
Первый вопрос по 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));
    }
});

Answer 2

Я нашел ту же проблему.Anno 2014 я придумал это решение

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

Answer 3

Даже Ваше требование немного отличается, но это может вам помочь.Загрузите zip-файл, откройте HTML-файл в браузере и нажмите кнопку.это автоматически разделит HTML-контент.