Move html elements from container to container

I've to divide a text into portions. Text contains only paragraphs ( p开发者_如何学Go tags ) inside <div id="main">. I wanted to insert some divs with id page1...pagen, and distribute the paragraphs inside them.

Here is my code, but it is not working properly. Divs are generated before the paragraphs, and the paragraphs aren`t moved inside them.

Except the error, is there any more efficient way to do this?

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

EDIT : this should be the result (basically)

I think it's pagination you're after, but perhaps using the jQuery Columnize or Columnizer plugin would work, then you could tweak to show/hide the columns created.

I had a play around with the idea, being a noob, it was a good exercise, I didn't use detach(), but append().. then when the original "main" div was "empty" I 'swept it out' and and detached it - In one of my original efforts there was sometimes children that didn't move out of the main div, I think it was the extra page** that eventually fixed that, but I added the final sweep just in case.

There are some issues, like clicking the top link doesn't color both counters whereas clicking the bottom link does (it doesn't on the fiddle?), **I had to add an extra overflow div to allow for uneven splits (paragraphs or children's different sizes meant the height splits couldn't be exact) - this extra div has never not been necessary in my tests but YMMV

It degrades fine when JS turned off due to CSS'ing the main div (.article) the same as the pages

I still don't understand why the actual split splits into the columns rather than putting them all in the first page (not complaining ;)) - why/how does the loop know to put it into the 3/4 page divs?

My Effort: here

I'm not sure about the links, but for the divs, if you want to put every paragraph in its own div, you can use .wrap():

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

If you'd post the before and after structure of the HTML, we could help more.

I guess that's what you're looking for:

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