jQuery function doesn't work in a JavaScript for-loop. Please Help

I've posted variations of this question before and just as I think I've got it, it doesn't work again.

I figured out the problem though, but have no开发者_运维问答 answer. When I execute this code it works just fine:

var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
    for (i=0;i<=5;i++) {
        for (j=0;j<3;j++) { 
            var $eqn = "ul.side-block-content li:eq("+i+") .article-title a span";  
        }
        $($eqn).replaceWith($titleMarquee+$(this).text()+"</marquee>");
    }

But as soon as I put in an event like .mouseenter it screws up and stops working:

var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
for (i=0;i<=5;i++) {
    for (j=0;j<3;j++) { 
        var $eqn = "ul.side-block-content li:eq("+i+") .article-title a span";  
    }
    $($eqn).mouseenter(function(){
        $($eqn).replaceWith($titleMarquee+$(this).text()+"</marquee>");
    }); 
}

What else is strange that I've figured out is part of the problem is when both the .event and .replaceWith have a variable. If I just assign a variable to the .mouseenter and use $(this) for .replaceWith it works fine but restricts me from what I want to do. I can't even use ("+i+").

This is what I want to achieve with the script and it doesn't work this way. Please help.

var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
for (i=0;i<=5;i++) {
    for (j=0;j<3;j++) { 
        $("ul.side-block-content li:eq("+i+")").mouseenter(function(){
            $("ul.side-block-content li:eq("+i+") .article-title a span").replaceWith($titleMarquee+$(this).text()+"</marquee>");
        });   
    }
}

---

How about something like this instead:

$("ul.side-block-content li").mouseenter(function() {
    var $this = $(this);
    var $titleMarquee =
        $('<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1"></marquee>');

    $(".article-title a span", $this)
        .replaceWith($titleMarquee.text($this.text()));
});

Here's a working example: http://jsfiddle.net/mXtmB/

If you want to limit the li elements so that the event is applied to to the first 6:

for (var i = 0; i <= 5; i++) {
    $("ul.side-block-content li:eq(" + i + ")").mouseenter(function() {
        var $this = $(this);
        var $titleMarquee =
        $('<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1"></marquee>');

        $(".article-title a span", $this)
            .replaceWith($titleMarquee.text($this.text()));
    });
}

---

It's hard for me to test it right now, check if this is working.

var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
var i, j; // important
for (i=0;i<=5;i++) {
    (function (i) {
        $("ul.side-block-content li:eq("+i+")").mouseenter(function(){
            $("ul.side-block-content li:eq("+i+") .article-title a span").replaceWith($titleMarquee+$(this).text()+"</marquee>");
        });   
    }(i));
}

I also deleted that pointless loop.

---

When you use the $eqn variable to access the element, you will be accessing the last element, as the value of the variable has changed since you hooked up the event. Use the this keyword to access the element that the event is hooked up to:

var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
for (i=0;i<=5;i++) {
  $("ul.side-block-content li:eq("+i+") .article-title a span").mouseenter(function(){
    $(this).replaceWith($titleMarquee+$(this).text()+"</marquee>");
  });
}