jQuery - Need to use variable from first function inside another function?

Question

Uber Noob but I thought I was close.

var markers = $j('span.marker');

$j(markers).each(function () { //function to store original marker positions 
    var startOrigin = $j(this).css('margin-left');

});

$j("a.timeline-view").click(function () { //function to return markers to stored positions
    $j(markers).each(function () {

        $j(this).animate({
            marginLeft: startOrigin
        })

    });
});

Second function can't find the var??

Tom Tu · Accepted Answer · 2011-01-26 13:35:40Z

1

I assume that $j == alias to jquery

The solution to your problem is using the jquery .data('name', val) to store the value bound to an element and then retrieve it with .data('name') when necessary.

$j(markers).each(function(){ //function to store original marker positions 

       $j(this).data('startOrigin', $j(this).css('margin-left'));

});

$j("a.timeline-view").click( function() { //function to return markers to stored positions
    $j(markers).each(function(){
        var marker = $j(this);
        marker.animate({marginLeft : marker.data('startOrigin') })
    });         
});

check http://api.jquery.com/jQuery.data/ for more info on using jQuery data

edited Jan 26, 2011 at 13:35

answered Jan 26, 2011 at 13:13

Tom Tu

9,58338 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

lonesomeday Over a year ago

Or even just markers.each, give that it is a jQuery selection already.

Adman Over a year ago

haaaaaamazing. Will research .data().

Tom Tu Over a year ago

cheers, also remember about caching jquery objects if you use them few times - every time you do $(...) you create a new jquery object wrapper which takes some memory/time - if you use $(this) multiple times in one scope it's good to cache it to a variable like var el = $(this) and then use el in place of $(this). Same applies if you use any other selector multiple times - always cache! It'll make your code much more readable :) (edited to include what I mean)

Adman Over a year ago

So even for that tiny block of code its worth caching? or only if I have 1000 lines of it. or shut up and always cache from this point on?

Tom Tu Over a year ago

@Adman it is worth it - even if the gain will be insignificant it'll help you to make it a habit and imo will make the code more readable and maintainable - if this would ever change to something else (like $(this).parent() or whatever) you'd have to change it only in one place. So as I've wrote - it's a good habit to do it this way :)

Community · Accepted Answer · 2017-05-23 11:51:51Z

To explain why your code doesn't work...

A function in Javascript has in scope all variables that were declared in containing functions or in that function. Using the var keyword sets a variable to the current scope. In your example, startOrigin is only in the scope of the first function. If you put it in the parent scope, all the functions in your example will have it in their scope:

var markers = $j('span.marker');
var startOrigin;  // declare the variable in this scope

markers.each(function () { //function to store original marker positions 
    startOrigin = $j(this).css('margin-left'); // use the parent scope
});

$j("a.timeline-view").click(function () { //function to return markers to stored positions
    markers.each(function () {

        $j(this).animate({
            marginLeft: startOrigin // use parent scope
        })

    });
});

Note, however, that this example is kind of broken anyway. You are looping through the whole set of markers, overwriting the startOrigin each time. You need to use data as Tom Tu said in his answer to set data for an individual DOM element.

Collectives™ on Stack Overflow

jQuery - Need to use variable from first function inside another function?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related