jQuery question: How do I clean this code to be more effeciant, or is there a way to loop this?

This is my code, and it keeps repeating until :eq(15). I'm new to jQuery and JavaScript in general and I doubt that I'm doing this correctly. Can anyone help me with cleaning this code up into a loop maybe? I basically need this script to increase :eq(0) by 1 until 15.

var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1"><span>';

$("ul.side-block-content li:eq(0)").mouseenter(function(){$('ul.side-block-content li:eq(0) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(0) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(0)").mouseleave(function(){$('ul.side-block-content li:eq(0) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(0) .article-title a').text()+'</span>');});  

$("ul.side-block-content li:eq(1)").mouseenter(function(){$('ul.side-block-content li:eq(1) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(1) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(1)").mouseleave(function(){$('ul.side-block-content li:eq(1) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(1) .article-title a').text()+'</span>');});  

$("ul.side-block-content li:eq(2)").mouseenter(function(){$('ul.side-block-content li:eq(2) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(2) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(2)").mouseleave(function(){$('ul.side-block-content li:eq(2) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(2) .article-title a').text()+'</span>');});  

$("ul.side-block-content li:eq(3)").mouseenter(function(){$('ul.side-block-content li:eq(3) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(3) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(3)").mouseleave(function(){$('ul.side-block-content li:eq(3) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(3) .article-title a').text()+'</span>');});

$("ul.side-block-content li:eq(4)").mouseenter(function(){$('ul.side-block-content li:eq(4) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(4) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(4)").mouseleave(function(){$('ul.side-block-content li:eq(4) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(4) .article-title a').text()+'</span>');});

$("ul.side-block-content li:eq(5)").mouseenter(function(){$('ul.side-block-content li:eq(5) .article-title a span').repl开发者_高级运维aceWith($titleMarquee+$('ul.side-block-content li:eq(5) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(5)").mouseleave(function(){$('ul.side-block-content li:eq(5) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(5) .article-title a').text()+'</span>');});  

Thanks in advance.

---

for (i = 1; i <= 15; i++) {
    $("ul.side-block-content li:eq(" + i + ")").mouseenter(function() {
        var $this = $(this);
        $this.filter('.article-title a span').replaceWith(
        $titleMarquee + $this.filter('.article-title a').text() + '</span></marquee>');
    }).mouseleave(function() {
        var $this = $(this)
        $this.filter('.article-title a marquee').replaceWith('<span>' + $this.filter('.article-title a').text() + '</span>');
    });
}

P.S. I'm not sure this will work - need to see your HTML. (Don't know what is in $titleMarquee, and why there is no opening <span> in first replace)

---

It looks like all of those statements do the same thing, just to different list items. Assuming that's correct, you can do this:

$("ul.side-block-content li").hover(
    function(){
        var link = $(this).find(".article-title a"),
            span = link.find("span");
        span.replacewith($titleMarquee + link.text() + '</span></marquee>');
    },
    function(){
        var link = $(this).find(".article-title a"),
            marquee = link.find("marquee");
        marquee.replaceWith('<span>' + link.text() + '</span>');
    }
);

hover is a shortcut for hooking up functions to mouseenter and mouseleave. Within each function, this will refer to the li element itself, and so if we wrap it in a jQuery object we can use find to find its descendants. It looks like you're working primarily with the contents of a link, so the code finds that link, then finds either the span (on mouseenter) or the marquee (on mouseleave) and replaces it with either a marquee or a span containing the link text.

---

Try this:

$('ul.side-block-content').delegate('li', 'mouseleave', function() {
    $a = $(this).find('.article-title a');
    $a.filter('span:first').replaceWith($titleMarquee + $a.text()
                                        + '</span></marquee>');
});