Loop through Logo text

gistfile1.js

// The purpose of this javascript is
// to wrap every letter inside a the #logo-text span in a span
// Unless it is already wrapped in a span
// in which case we ignore it
// We wrap every letter in a span so we can animate it seperately
// HTML:
// <span id="logo-text" class="text">
//    tap<span class="and">+</span>hold 
// </span>

( function(d, undefined) {

	// Wrap each letter in the logo text in a span
	var logoText = ( function() {

		// Nodes for the title text
		var logoText = d.getElementById('logo-text');
		var logoTextChildren = logoText.childNodes;
		var logoTextChildCount = logoTextChildren.length;

		// This becomes the new content of logoText
		var formattedLogotext = "";

		// For each child of logotext
		var i, child, text, charCount, ii, newText;
		for ( i=0; i<logoTextChildCount; i++ ) {
			
			child = logoTextChildren[i];

			// Its a text Node
			if ( child.nodeType === 3 ) {

				// Trim any whitespace
				text = child.textContent.replace(/^\s+|\s+$/g, '');

				// loop through each letter in the text node
				charCount = text.length;
				for ( ii = 0; ii<charCount; ii++ ) {

					// Wrap the letter in a span, then add it to the HTML string
					formattedLogotext += "<span>" + text[ii] + "</span>";

				}

			} else {

				// Add the wrapper to the HTML string
				formattedLogotext += child.outerHTML;

			}

		}

		logoText.innerHTML = formattedLogotext;

		return logoText;

	}())






}( document ))