Question

I am trying to build a function for inserting the number of Facebook Likes into a Div tag. So far, I have a script that can get the URL from a Div tag which is inside of another Div tag called ‘entry’ and then have the .getJSON() method retrieve the number of Facebook likes for each entry.However, I can’t get each retrieved value of Facebook Likes to insert into a Div tag for each entry. Please note, I simplified my code to where it alerts each Facebook Like value. This is what I have so far:

<div class="entry">
  <div class="fburl">https://graph.facebook.com/zombies</div>
  <div class="facebook-likes"></div>
</div> 
<div class="entry">
  <div class="fburl">https://graph.facebook.com/starwars</div>
  <div class="facebook-likes"></div>
</div>

And here’s my jQuery:

$(document).ready(function(){
$(".entry").each(function() {
    var fbURL = $(this).find(".fburl").html();
    $.getJSON(fbURL, function(fbData) {
        var fbArr = fbData['likes'];
        alert(fbArr);
    });
});
});

​So what I am trying to do is iterate through each entry, get the Open Graph URL for it, retrieve the Likes value, and then insert it into the appropriate Div tag, so the code should render as:

<div class="entry">
 <div class="fburl">https://graph.facebook.com/zombies</div>
 <div class="facebook-likes">2,586 Likes</div>
</div> 
 <div class="entry">
  <div class="fburl">https://graph.facebook.com/starwars</div>
  <div class="facebook-likes">8,905,721 Likes</div>
</div>

​
​

Answer 1

$(document).ready(function() {
    $('.entry').each(function() {
        var $this = $(this),
            fbURL = $this.children('.fburl').html();
        $.getJSON(fbURL, function(fbData) {
            $this.children('.facebook-likes').html(fbData['likes'] + ' Likes')
        });
    });
});

See: http://api.jquery.com/children

Demo: http://jsfiddle.net/9EALz/2/

Note: Using children() is going to be marginally more efficient than using find() as it limits the DOM traversal to a single level ( http://jsperf.com/find-vs-children/13 ). Cashing the jQuery object $(this) via var $this = $(this) is also slightly more efficient as it prevents unnecessary selector interpretation ( http://jsperf.com/jquery-cache-vs-no-chace ).