Forums

JohnMotylJr

I have this:

var length = $('h1').html().length;

alert("h1 " + length);
    
var _count = 0;

$('h1').filter(function() 
{
    return $(this).text().length > _count;
}).wrapInner(function() //need to target each char not all inside h1
{
    return '<span id="' +  this.nodeValue + '" />'; // id or class doesnt matter
}); //this.nodeValue should be the text but function isnt standalone

The html output

<h1>
    <span class="null">IM COLORFUL</span>
</h1>

What i WANT to happen:

<h1>
    <span id="i1">I</span>
    <span id="i2">M </span>
    <span id="i3">C</span>
    <span id="i4">O</span>
    <span id="i5">L</span>
    <span id="i6">O</span>
    <span id="i7">R</span>
    <span id="i8">F</span>
    <span id="i9">U</span>
    <span id="i10">L</span>
</h1>

Source: http://jsfiddle.net/john_motyl/aWC2w/1/

elneco

sounds like lettering.js https://github.com/davatron5000/Lettering.js/blob/master/jquery.lettering.js

joshuanhibbert

Lettering.js was the first thing I thought of too.

elneco

http://jsfiddle.net/hCvsu/185/

JohnMotylJr

@elneco, your title is quite awesome good sir :)

I didnt realize there was a Lettering.JS but i will deff look at the documentation. I took a step back and realized the main code i was using had redundancies and recursive functions (I wanted so bad to use some :( ). But i am packing all of it into a plugin in which does what i explained but adds more methods and a shload of customizable stuff.

Thanks for the responses btw, i have been hitting the jQuery forums pretty hard and waited until now (when i finally fixed it) to check my post. Again, thanks guys for the help.

treehouse : what would you like to learn today?

Forums

[Solved] ----