Question

I want to execute this function and use the variable outside the function, but inside an each function. How can I get this to work?

$('.social').each(function() {
    url = "http:www.google.com";
    bit_url(url);    
    $(element).append(urlshortened);
});

function bit_url(url) {
        var url = url;
        var username = "...";
        // bit.ly username
        var key = "...";
        $.ajax({
            url : "http://api.bit.ly/v3/shorten",
            data : {
                longUrl : url,
                apiKey : key,
                login : username
            },
            dataType : "jsonp",
            success : function(v) {
                urlshortened = v.data.url;
            }
        });
    }

Answer 1

The “A” in Ajax stands for Asynchronous code won’t work like that, you need callbacks.

function bit_url(url) {
   [...]
   //return the Deffered object
   return $.ajax({ [...]
}

$('.social').each(function() {
    [...]
    //attach a `done` callback to the returned $.ajax's Deferred instance
    bit_url(url).done(function(v) {
        $(element).append(v.data.url);
    });
});

Deferred.done is an equivalent to $.ajax‘s success, I’ve attached the done handler inside the .each scope so your callback can access all variables from the .each scope.

Though, if $(element) is always the same element, you will be fine with @JohnJohnGa’s answer by putting the append inside the success handler.

I assume you want to replace anchors’ href inside the .each due to the question nature, so you’d store a reference to the link inside of the .each and use that reference inside the callback.