Question

How can I turn the html below,

<h3>Break me</h3>

to

<h3>
<span class="box-letter">B</span>
<span class="box-letter">r</span>
<span class="box-letter">e</span>
<span class="box-letter">a</span>
<span class="box-letter">k</span>
<span class="box-letter">&nbsp;</span>
<span class="box-letter">m</span>
<span class="box-letter">e</span>
</h3>

$("h3").text(); that’s all I can think of! (feeling ashamed…)

css,

.box-letter {
    display:block;
    clear:both;
    width:50px;
    border:1px solid #000;
    }

Thanks.

Answer 1

// Splits the string into a "character array"    
var charArray = $('h3').text().split(''); 
// Clear the html of h3 so we can change it    
$('h3').html(''); 
for (var i = 0; i < charArray.length; i++)
{
  // for each character, append it to h3 with a span wrapper
  $('h3').append('<span class="box-letter">' + ((charArray[i] == ' ') ? '&nbsp;' : charArray[i]) + '</span>')
}