jquery each + $.get doesn't work

Question

I'm doing a Reddit like website in French, and to fully optimize I'm fetching the results, caching it, then via jQuery querying each link to see if they were downvoted/upvoted.

1. What do you think about that to optimize the queries?

2. Why doesn't it work! Here's my code.

HTML:

    <div class="box ajax_div" title="3">
        <div class="score">
            <a href="#" class="upvote_position" title="post-up-3"><img src="images/up.png" /></a>
            <div class="score_position">1</div>
            <a href="#" class="downvote_position" title="post-down-3"><img src="images/down.png" /></a>
    </div>

    <div class="box_info">
        <div class="link">
            <a href="#" class="text-show"><a href="?show=3" rel="nofollow" class="out">ouioui</a> 
        </div>
        <div class="further">
            <span class="date" title="2012-04-25 04:57:05">il y a 13 heures</span> | posté par <a href="?user=david">david</a> dans <a href="?chan=100hp.fr">100hp.fr</a>
        </div>
        <div class="further_more">
            <a href="?show=3"><img src="images/comment.png" />2 commentaires</a> <a href="#" class="save" title="3"><img src="images/save.png" />sauvegarder le lien</a> <a href="#" class="spam" title="3"><img src="images/report.png" />spam?</a>
        </div>
    </div>
    <div class="textbox" style="display:none;">razraz</div>
    </div>

JavaScript:

    $(".box").each(function(index){
        ele = $('.box').eq(index);
        $.get("ajax/score.php",
        { idbox: ele.attr('title'), type: "post" },
        function(data) {
            ele.find(".score_position").html(data);
        });
    });

I have multiple boxes like that, and it only affects the last one of them. I've first tried without the index and the eq(index) and it does the same thing.

Answer 1

You override ele global variable, try adding var:

$(".box").each(function(index){
    var ele = $('.box').eq(index);
    $.get("ajax/score.php",
    { idbox: ele.attr('title'), type: "post" },
    function(data) {
        ele.find(".score_position").html(data);
    });
});

Another improvement in doing this is to use the context in which the callback for .each() is being executed. This will speed up your script a little, as the selector does not need to be evaluated again and you simply enclose DOM element (this) within jQuery object:

$(".box").each(function(index){
    var ele = $(this);
    $.get("ajax/score.php",
    { idbox: ele.attr('title'), type: "post" },
    function(data) {
        ele.find(".score_position").html(data);
    });
});

Answer 2

The .get request is asynchronous, which means that it doesn't block the code execution once it is called.

In effect, ele is not the element you think it is when the .get callback is finally called (it'll probably be the last element of .box).

To overcome this, try to target the element without a variable that is changed every iteration of the loop.