jQuery addClass example

Change class name on click in jQuery

by josekerekes

HTML

<div id="target">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec elementum orci. Pellentesque pellentesque diam et dictum aliquet. Vestibulum nec magna ac tortor suscipit posuere. Donec scelerisque, dui vitae bibendum pulvinar, tortor turpis consectetur metus, sed suscipit magna enim sed nulla. Sed lobortis purus eu dolor tempus imperdiet sit amet eu mi. Nullam at dolor vel ante pretium sagittis non ut turpis. Sed cursus blandit tellus nec sodales. Pellentesque bibendum molestie pretium.

Nullam euismod risus lectus, et mattis dolor efficitur sit amet. Quisque eu justo sed justo porta volutpat. Sed eleifend dignissim ex vel auctor. Suspendisse et mi a metus vehicula tempus a et purus. Pellentesque lobortis varius sem eu vestibulum. Duis dictum dignissim imperdiet. Cras at hendrerit lectus. Praesent vitae mauris non mauris pulvinar rhoncus. Curabitur fermentum consequat mi, in aliquam odio dignissim ac. Curabitur vitae ante rhoncus, tristique neque eget, finibus sem. Vivamus cursus lobortis rutrum. Proin posuere interdum risus, ut hendrerit lacus rhoncus vel. Nunc pharetra tincidunt quam, eu viverra elit ultricies vitae.
</div>

CSS

* {
  padding:0;
  margin:0
}
div {
  text-align:justify
}

JavaScript

var div =  $('#target');
var words = div.text().split(' ');
var text = "";
$.each(words, function(i, w){
	if($.trim(w)) text = text + '<span>' + w + '</span> ' }); //each word 
div.html(text); 

$(window).resize(function(){ 

    var line = 0; 
    var prevTop = -15; 
    
    $('span', div).each(function(){ 
      var word = $(this); 
      var top = word.offset().top; 
      if(top!=prevTop){ 
        prevTop=top; 
        line++; 
      } 
      word.attr('class', 'line' + line); 
      
    });//each 
		for(var l = 1; l < line; l++) {
    $('.line'+l).wrapAll('<div class="line-wrapper wrapper-line' + l+'"></div>')
    }
    
    
});//resize 

$(window).resize(); //first one