CODEWITHSUNDEEP
javascriptjqueryfor-loop
user713052
user713052

Reputation: 25

JavaScript (jQuery) for-loop question

Hey all, I'm new to JavaScript and I'm using the jQuery library for this. Basically I'm trying to create multiples of this line and I'm using ":eq(0) to do it. The issue is that :eq(0) repeats 3 times in the code and with the loop that I'm doing every time it repeats it has a different number.

This is what I'm getting from it i think (:eq(0), :eq(1),:eq(2), :eq(3), etc..) I need it to do this (:eq(0),:eq(0),:eq(0), :eq(1) :eq(1) :eq(1), etc...)

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

If anyone can let me know how to do this loop correctly, or maybe how to recreate the code for it to do the same thing that would be great.

Thanks in advance.

@Nick's answer:

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

This is what I'm using now and it's not working. Am I doing it correctly?

@Gilly3

$("ul.side-block-content li marquee").each(function() {
    this.stop();              // prevent the marquee from scrolling initially
    }).mouseenter(function() {
    this.start();             // start the scroll onmouseenter
    });

<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate">

Upvotes: 0

Views: 6223

Answers (2)

gilly3
gilly3

Reputation: 91497

It looks like you are trying to make your <li> text scroll when you hover over it. Is that right?

Just put the marquee code in the original html and do this:

$(function ()
{
    $("ul.side-block-content li marquee").each(function() {
        this.stop();              // prevent the marquee from scrolling initially
    }).mouseenter(function() {
        this.start();             // start the scroll onmouseenter
    });
});

I also want to say not to use the marquee tag since it is deprecated and to use a jQuery plugin instead, but the last jQuery marquee plugin I saw was actually using a <marquee> in the back end anyway. So... pfft.

Upvotes: 1

Nick
Nick

Reputation: 478

You could embed another for loop inside, like so:

for (i = 0; i < 6; ++i) {
  for (j = 0; j < 3; ++j) {
    // repeat i three times, and use :eq("+i+")
  }
}

Upvotes: 0

Related Questions