Extract two links at the same time

Question

I am working with a service called Embedly, which makes it possible to 'enrich' ones links in the page. The people at embedly have made it possible to call there API with jQuery.

So first one has a link like this:

<a href="http://www.bbc.co.uk/news/business-24692392">bbc</a> 

Then you call the API to do the magic like this:

var hr = $('a').prop('href');

$.embedly.extract([hr], {key: '672cb2dfbc7249f2beb67db44204a39c'})
  .progress(function(result){
    $('body').html(result.content);
  });

The problem is that I can't seem to process two links at the same time. If you look at this example at JsFiddle(link) you will see only one link is being processed. I tried solving this with jQuery each and calling the two links as different variables but the API always processes the last url. How do I get it to process multiple URL's?

Answer 1

Im more of a javascript guy so here you go...

var link=document.getElementsByTagName('a');
for(var i=0;i<link.length;i++)
{
    $("a").css("visibility","hidden");
    $.embedly.extract([link[i].href], {key: '672cb2dfbc7249f2beb67db44204a39c'})
  .progress(function(result){     
    document.body.innerHTML +=result.content;      
  });
}

WORKING DEMO

Answer 2

i don't know embedly but i am seeing that you are assigning the result to the body html, this may works.

html:

<a id="a0" href="http://www.bbc.co.uk/news/business-24692392">bbc</a>

<a id="a1" href="http://www.bbc.co.uk/news/world-us-canada-24699733">bbc</a>
<div id="resultA"></div>
<div id="resultB"></div>

js

var hr0 = $('#a0').prop('href');
var hr1 = $('#a1').prop('href');

$.embedly.extract([hr0], {key: '672cb2dfbc7249f2beb67db44204a39c'})
  .progress(function(result){
    $('#resultA').html(result.content);
  });
$.embedly.extract([hr1], {key: '672cb2dfbc7249f2beb67db44204a39c'})
  .progress(function(result){
    $('#resultB').html(result.content);
  });

http://jsfiddle.net/wwkhR/5/