将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

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

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

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

Answer 2

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

 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>');
      }
    });

Answer 3

我认为这是你想要的分页，但也许使用jQuery Columnize or Columnizer插件可以工作，然后你可以调整以显示/隐藏创建的列。

我玩这个想法，做个菜鸟，这是一个很好的练习，我没有使用detach()，而是append() ..然后当原来的“主要”div是“空”我把它扫出来并且分开了 - 在我最初的一次努力中，有时孩子们没有离开主要的div，我认为这是额外的页面**最终修复了，但是为了以防万一，我添加了最终扫描。

我会发布我如何上场，但记住它非常无趣，（可能不是真正的答案，更多的是思想训练）而且它可能不是非常优化的代码，所以如果专业读者/我将不胜感激回答者没有投票，而是对如何改进思考/编码提出了一些建设性的批评。这个的智慧

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

当JS关闭时，由于CSS主要div（.article）与页面相同，它会降级很好

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

我的努力：here