Question

I’d like to wrap a block of text into divs such that each div has the same number of characters. The goal is to make divs that can be clicked between like pages of a book, i.e., pagination. I’m having trouble though with the each() statement to wrap each segment of the text block into its own div of equal length.

Jere’s the code Hhich works for one div but doesn’t yet work to make multiple divs:

HTML:

<div id="content">hi my name is joe. I work at a school.</div>
<div id="count"></div>
<button>wrap</button>

javaScript:

$('button').on('click', function(){ 
  var content=$('#content').text();
  $('#count').text(content.length);        
  /*   var length20; //20 character long text block
    if(content.length>=20);
      $.each(length20, function(){
    length20.wrap('<div class="new" />');   
    }            
 */ 
});

here’s the fiddle if you’d like to edit the code directly.

If someone might be able to edit this fiddle to fix its each() statement I’d be very appreciative.

Answer 1

Try something like this:

$('button').on('click', function(){ 
     var content=$('#content').text();
     //'5'-length blocks
     var parts = content.match(/.{1,5}/g);
     $('#count').text(parts.length);   
     $.each( parts, function( index, part ){
        $("body").append ('<div class="New">'+part+'</div>')
     });
});​