problem with cycle for

Question

I have a cycle that it's just working for my last element. It was suposed to work for each element.

for (var z=1; z<$('.page').length;z++){ 

$('#arrowUp_'+z).click(function(){
        $('#thumbsContainer_'+z).animate({top: '-='+93+'px'}, {duration: 1000});
        cont++;
        arrowThumbs();
    });

    $('#arrowDown_'+z).click(function(){
        $('#thumbsContainer_'+z).animate({top: '+='+93+'px'}, {duration: 1000});
        cont--;
        arrowThumbs();
    });
}

If I replace z for one number I can make it working for that case. But I don´t want to repeat the same process N time. So I thought it was good idea to make a a cycle for...but no success

Can anyone explain how to do that?? Thanks

[This other question](http://stackoverflow.com/questions/6425062/passing-functions-to-settimeout-in-a-loop) asked almost at the same time as yours is about exactly the same problem. — Pointy, Jun 21 '11 at 12:19

Val · Accepted Answer · 2011-06-21T16:01:39.143

0

Why are you using IDs? why can't you just add a class on each element like so

<div id="arrowUp_1" class="arrowUp">

</div>

$('.arrowUp').click(function(){...});

also [things you should know]

'-='+93+'px' its pointless you can have '-=93px' still be the same thing as it would be consider as a string not a number its just like saying var h3ll0; is not a string :)

cont++ is not predefined before and your whole don't work because animate() is wrong... click the link so u can get some help with it http://api.jquery.com/animate/

you do not put {duration:1000} just put 1000 as that is an attribute on its own and expects a number [of milliseconds not a json object]...

UPDATE check this code...

http://jsfiddle.net/JFRAb/3/

==============================================

CSS:

span {background: red;position: absolute; left: 0;}

JS

$(function() {
    $('div').click(function() {
        $('p').append($(this).text());
        //alert('text');
        var i = $(this).index($('ul div'));
        console.log($(this));
        $('ul span').eq(i).animate({
            left: '50%'
        }, 1000);
    });
});

HTML

<p>Test...</p>
<hr />
<ul>
    <div>Click 1</div>
    <div>Click 2</div>
    <div id="b">Click 3</div>
    <div>Click 4</div>
</ul>
<br /><br /><br /><br />
<ul>
    <span>Im thumb 1</span>
    <span>Im thumb 2</span>
    <span>Im thumb 3</span>
    <span>Im thumb 4</span>
</ul>

This is a bad example of element choice :) but its better solution for you :) I should think :)

edited Jun 21 '11 at 16:01

answered Jun 21 '11 at 12:22

Val

17,336
23
95
144

Hey Val, thanks! You're right. I changed to .arrowUp and that's ok. BUT the result is the same. I mean: if I click on the first arrowUp the action happens on the third block (where also existes a third arrowUp). I corrected the first tip. About var count I defined, sorry for not included it in my first doubt Any ideas?? – saomi Jun 21 '11 at 13:51
did you change the `#thumbsContainer_[nth]` with classes as well?, also use the `index()` to get the index... i'll put up something for you,,,, on js fiddle and eventually on my answer :) – Val Jun 21 '11 at 15:18
also can you make sure that your left... has the right position, as it may not work if certain position is not set :) like absolute or something like that :) – Val Jun 21 '11 at 15:31
Hey Val, Thanks a lot. I just seen the update you did. It Worked!! And jsFiddle is awesome!! Thanks a million!! (Now for homework I must understand it - i, n, .eq(i) - I have never seen that, Do you have any book that you recommend for a young newbie can be a pro??) Big Hugs – saomi Jun 21 '11 at 21:47
i,n are attributes that .each(); can pass into the function, where n is each element and i is an increment or (i++) or (i= i+1), eq(i) is the lets say you have 3 div's and you need to get the second div only you use $('div').eq(1); u use 1 to get the second as indexed items start from 0 [zero]. read on jquery api properly and make sure you understand what each thing does and experiment with things, thats the best way to learn :) – Val Jun 22 '11 at 10:58
thanks val. I got one more doubt. Can You check http://stackoverflow.com/questions/6442357/jquery-double-function-each ???please – saomi Jun 22 '11 at 15:24

problem with cycle for

1 Answers1