将 html 元素从容器移动到容器

Question

我必须将文本分成几部分。文本仅包含 <div id="main"> 内的段落（ p 标签）。我想插入一些 id 为 page1...pagen 的 div，并在其中分配段落。

这是我的代码，但它不能正常工作。 div在段落之前生成，段落内部不会移动。

除了报错，有没有更有效的方法？

    var n = 1;
    $('article').prepend('<div id="pagecnt">&nbsp</div><br/>');

    $('#pagecnt').append('<a href="#'+n+'">'+n+'</a>').after('<div id="page'+n+'" style="display:block;"></div>');

    var pargraph = $('p');
    for (var i = 0; i < pargraph.length; i++)
    {

        if ( $(document).height() < 2 * $(window).height() )
        {
            $('#page'+n).append(pargraph[i].detach());
        } else {
            $('#page'+n).after('<div id="page' + ++n + '" style="display:none;"></div>');
        }
    }

编辑：这应该是结果（基本上）

Answer 1

我认为这是您所追求的分页，但也许使用 jQuery Columnize or Columnizer 插件会起作用，然后您可以调整以显示/隐藏创建的列。

我玩弄了这个想法，作为一个菜鸟，这是一个很好的练习，我没有使用detach()，而是使用append().. 然后当原来的“主” div 为“空”时，我'扫出'并分离它 - 在我最初的努力之一中，有时孩子们没有移出主 div，我认为是额外的页面**最终解决了这个问题，但我添加了最后扫一扫以防万一。

我会发布我的进展情况，但请记住，它非常笨拙，（可能不是真正的答案，更像是一种思路）并且它可能不是非常优化的代码，所以如果专业读者/我将不胜感激回答者没有投反对票，而是提出了一些关于如何提高思维/编码和智慧的建设性批评

有一些问题，比如点击顶部链接不会为两个计数器着色，而点击底部链接会（它不在小提琴上？），**我必须添加一个额外的溢出 div 以允许不均匀分割（段落或孩子的不同尺寸意味着高度分割不能准确） - 这个额外的 div 在我的测试中从来没有必要，但是 YMMV

由于 CSS 将主 div (.article) 与页面相同

我仍然不明白为什么实际的拆分会拆分成列而不是将它们全部放在第一页（不是抱怨;））-循环为什么/如何知道将其放入 3/4 页 div ?

我的努力：here

Answer 2

我不确定链接，但是对于 div，如果您想将每个段落放在自己的 div 中，可以使用.wrap()：

$('p').wrap(function(i) {
    return '<div id="page'+i+'" style="display:block;" />'
});

如果您发布 HTML 的前后结构，我们可以提供更多帮助。

Answer 3

我猜这就是你要找的东西：

 var n = 1;
    $('article').prepend('<div id="pagecnt"></div><br/>');

    $('#pagecnt').append('<a href="#'+n+'">'+n+'</a>').after('<div id="page'+ 
       n + '" style="display:block;"></div>');

    $('p').each(function(i){
      if ( $(document).height() < 2 * $(window).height() ){
        $('#page'+n).append('<p>' + $(this).html().remove() + '</p>');
      }else{
        $('#page'+n).after('<div id="page' + (++n) + 
         '" style="display:none;"></div>');
      }
    });