jquery each + $ .getは機能しません

Question

フランス語のようなReddit Webサイトを作成しています。完全に最適化するために、結果を取得してキャッシュし、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); 
     }); 
    }); 

私はそのような複数のボックスを持って、それが唯一の彼らの最後の1に影響を与えます。私は最初にインデックスとeq（インデックス）なしで試してみたが、同じことをする。

Answer 1

あなたはvarを追加してみてください、eleグローバル変数をオーバーライドします。

$(".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()用のコールバックが実行されているコンテキストを使用することです。セレクタを再度評価する必要はありません、あなたは単にjQueryオブジェクト内のDOM要素（this）を囲むように、これは、スクリプトを少しスピードアップします：

$(".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の各機能は、「各」

に二つの引数を提供します

$（ '...'）。それぞれ（関数（インデックス、値）{...}）;

2番目の引数を使用します。

Answer 3

.get要求は非同期です。つまり、呼び出されるとコードの実行をブロックしません。

実際には、.getコールバックが最後に呼び出されたときにはeleの要素ではありません（おそらく.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 
}); 

を、私はそれをそのようにしないと、私のコードの残りの部分はそんなに速く返さ$アヤックスコールよりも終了します。グローバル変数を使用するかどうかは関係ありません。

UPDATE：

$アヤックスを使用して、リクエストを実行するために、ブラウザから利用できる唯一の2ソケットがあります。多くのリクエスト（500以上）がある場合、リクエストが追加されますが時間通りに処理できないため、ブラウザ（Chromeを使用しています）がハングアップします。しばらくすると、サーバーから接続エラーが発生します。

解決策：AJAXキューマネージャを使用してください。

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

希望、これはそのためだった