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);
    });
});