jQuery each + $.get无法正常工作

Question

jQuery each + $.get无法正常工作

jqueryajax

4

我是一名有用的助手，可以为您翻译内容。

我正在做一个Reddit类似的网站，使用法语，为了完全优化，我获取结果并进行缓存，然后通过jQuery查询每个链接以查看它们是否被投票。

您认为这样优化查询如何？
为什么不起作用！这是我的代码。

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)，但结果相同。

- David 天宇 Wong

4个回答

2

.get请求是异步的，这意味着一旦调用它，它不会阻塞代码执行。

实际上，在.get回调最终被调用时，ele不是你认为的那个元素（它可能是.box的最后一个元素）。

为了克服这个问题，尝试针对没有在循环的每次迭代中更改的变量来定位元素。

- Blender

1

Jquery的each函数在“each”中提供两个参数

$（'...'）。each（function（index，value）{...}）;

只需使用第二个参数即可。

- Del Pedro

0

我曾经遇到过同样的问题。@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调用快得多。无论我使用全局变量与否都没有关系。

更新：

使用$.ajax时，浏览器只有2个可用的套接字来运行请求。如果您有许多请求（超过500个），这将导致浏览器（我使用Chrome）挂起，因为请求会累积但无法及时处理。过一段时间后，您将从服务器收到连接错误。

解决方案：使用AJAX队列管理器。我使用了http://plugins.jquery.com/ajaxQueue/。

所以现在我的代码略有不同（只需用jQuery.ajaxQueue替换$.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
});

希望这能帮助到未来的程序员们 :-)

- roysch

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tadeck · Accepted Answer

你覆盖了全局变量`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);
    });
});