jquery each + $ .get не работает

Question

Я делаю Reddit как веб-сайт на французском языке, и для полной оптимизации я получаю результаты, кэшируя его, а затем через jQuery запрашивая каждую ссылку, чтобы увидеть, были ли они опущены/upvoted.

1. Что вы думаете об этом для оптимизации запросов?

2. Почему это не работает! Вот мой код.

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

У меня есть несколько коробок, как это, и это влияет только последний из них. Я сначала пробовал без индекса и eq (index), и он делает то же самое.

Answer 1

перенастройка ele глобальную переменную, попробуйте добавить 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); 
    }); 
}); 

Еще одно улучшение в этом заключается в использовании контекста, в котором обратный вызов для .each() выполняется. Это ускорит ваш сценарий немного, так как селектор не должен быть оценен еще раз, и вы просто заключите DOM элемент (this) в пределах jQuery объекта:

$(".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

JQuery в каждой функции обеспечивает два аргумента в «каждый»

$ ('...'). Каждый (функция (индекс, значение) {...});

просто используйте второй аргумент.

Answer 3

Запрос .get является асинхронным, что означает, что он не блокирует выполнение кода после его вызова.

Фактически, ele - это не тот элемент, который, по вашему мнению, когда вызывается окончательный ответ .get (вероятно, это последний элемент .box).

Чтобы преодолеть это, попытайтесь направить элемент без переменной, которая изменяется на каждую итерацию цикла.

Answer 4

У меня была та же проблема. @Blender дал мне первоначальную идею так: спасибо.

Мое решение было использовать:

$.ajax({ 
url: "myExample.html", 
context: this //"this" refer to the outer-context "this" & not the internal $ajax "this" 
}).done(function() { 
//do all the stuff you need to do, it will then be executed in the right order 
}); 

В моем случае, если я не делаю это таким образом, остальная часть моего кода заканчивается так гораздо быстрее, чем возвращенного $ .ajax вызов. Не имеет значения, использую ли я глобальную переменную.

UPDATE:

При использовании $ .ajax, есть только 2 розетки, доступные из браузера для запуска запросов. Если у вас много запросов (более 500), это заставит браузер (я использую Chrome) зависать, потому что запросы складываются, но не могут быть обработаны вовремя. Через некоторое время вы получите ошибки соединения с сервером.

Решение: используйте диспетчер очереди AJAX. Я использовал http://plugins.jquery.com/ajaxQueue/

Так что теперь мой код немного отличается (только пришлось заменить $ .ajax с jQuery.ajaxQueue):

jQuery.ajaxQueue({ 
url: "myExample.html", 
context: this //"this" refer to the outer-context "this" & not the internal $ajax "this" 
}).done(function() { 
//do all the stuff you need to do, it will then be executed in the right order 
}); 

Надеется, что это поможет будущим поколениям :-)