Question

An interesting little problem…

Trying to loop through the children of a paragraph (words) and color them, one by one.

Here’s a hard coded working version with words in separate elements:
http://jsfiddle.net/JjRHT/25/

using

window.setInterval(function(){
$(".item:nth-child(1)").css("color", "#FFFFFF");
}, 1000);

just to show what I’m attempting…obviously not the way to go!

so – can I select each child of a paragraph? and how do I do the loop properly – with a small delay…

steven

edit:

I found a jquery plugin that splits text into words nicely ready for css:

<p class="word_split">Don't break my heart.</p>
<script>
$(document).ready(function() {
  $(".word_split").lettering('words');
});
</script>

Which will generate:

<p class="word_split">
  <span class="word1">Don't</span>
  <span class="word2">break</span>
  <span class="word3">my</span>
  <span class="word4">heart.</span>
</p>

Answer 1

The main problem here is that you can’t apply styles to words of a paragraph.

If you want to color words (and not the whole element), you’ll have to extract the words from the paragraph.

This cuts the paragraph in two parts, and gives a different color to each part :

var tokens = $paragraph.text().split(' ');
var i=0;
window.setInterval(function(){
       i = (i+1)%tokens.length;
       $paragraph.html( '<span class=onecolor>'+tokens.slice(0, i).join(' ')+'</span>'
           + ' <span class=othercolor>'+tokens.slice(i, tokens.length).join(' ')+'</span>');
}, 1000);​

Demonstration : http://jsfiddle.net/CcBLr/1/

---

EDIT :

Supposing you want to make specific things on your words (as you say, different delays for example), you could do this for the preparation :

var tokens = $paragraph.text().split(' ');
var spans = tokens.map(function(t){return '<span>'+t+'</span>'});
$paragraph.html(spans.join(' '));
var $words = $paragraph.children('span');

$words is now a collection of the words of the paragraph but you may apply styles on them. for example with this :

$words.each(function(){
   var $word = $(this);
   setTimeout(
   ...