How to loop through replacing span with XML array items
My website has a flash animation I'd like to replace with a jQuery animation (www.theshredstop.com). I'm trying to create a dynamic statement to grab an array of words from an XML file and loop through replacing the word in a <span> with a random item. Would like it to loop continuously while the page is displayed. The HTML statement is:
<p style="text-align: center; font-size: 2em; font-weight: bold; margin: .5em,0,.5em,0;">
<span>Shred your </span><span id="indexShredItem">paper</span><span>, not your nerves.™</span>
</p>
Here is the script I'm using:
$(document).ready(function() {
$('#indexShredItem').delay(1000).fadeOut(1000, function () {
$.ajax({
type: "GET",
url: "shred_items.xml",
dataType: "xml",
success: function(xml) {
var rndItem = new Array();
$(xml).find('item').each(function(){
var itemArray = $.makeArray($(this).text());
rndItem.push(itemArray);
});
var rndNum = Math.floor(Math.random() * rndItem.length);
$("#indexShredItem").replaceWith('<span id="indexShredItem">'+rndItem[rndNum]+'</span>');
},
});
});
});
It works great once, but I can't get it to loop. I've tried "for" and "while" loops (no loop attempt is in the script above). Any ideas?