我有一个具有以下结构的页面(缩短了HTML内容的可读性)，其中呈现页面时DOM中“pictureinthread” div的顺序基于“voteamount”子div中的投票数(即考虑到picturemeta div，实际上下降了两级)。用户可以动态地给定图像(通过Ajax)投票，从而增加其计数(“voteamount”中的值)。我想，如果div的位置应该根据投票而改变，它可以动态设置动画并采用新的正确位置。我已经使ajax正常工作并且“voteamount”中的数字已更新，但是我的javascript / Jquery经验不足以进一步进行检查，即检查“voteamount”中的所有其他值是否为其他“pictureinthread”并执行如果“pictureinthread”应该移动，动画效果很好。

注意，我意识到当前它只能移动一个位置，但是我希望它能够基于ajax调用返回的值将其移动到“pictureinthread”列表中的任何位置，因为投票逻辑将变得更加复杂。

我正在将Grails与JQuery插件一起使用，当前如下所示，每个div的Ajax如下所示，您可以看到我需要帮助的地方(假设onComplete是http://grails.org/doc/latest/ref/Tags/remoteLink.html的最佳选择)

<g:remoteLink onComplete="HELP ME HERE!" controller="voting" action="upvote" update="upvotes${pictureInThread.id}" id="${pictureInThread.id}"> 

    <div class="pictureinthread" id=".."> 
        <img src="..." id="..." class="..."/> 
 
        <div class="picturemeta"> 
            <a href="..ajax call rendered with the g:remotelink..."><img class="thumbsup" src="..."/> <div class="voteamount" id='upvotes+unique...'>3</div></a>      
        </div> 
    </div> 
 
 
    <div class="pictureinthread" id="..."> 
        ..many more like the above.. 
    </div> 

请您参考如下方法:

另外，由于重要的是UX /动画，因此这是另一种方法:
http://jsfiddle.net/andromedado/jhYd7/
基本思想是函数updatePos接受jQuery包装的<div class="pictureinthread">，并将其动画化为相对于其直接同级的正确位置。在jsFiddle中，我在单击时触发了事件，但是在您的模型中，您将在ajax更新时触发它。
的CSS

.rel {postion:relative;} 

function getVN($div){ 
    return parseInt($div.find('.voteamount').text(),10); 
} 
function sendDown($div){ 
    //Prettily Animated Swap of this div with it's next sibling 
    var h = $div.height(), 
        d1 = false, 
        d2 = false, 
        c = $div.add($div.next()).addClass('rel'); 
    $div.animate({top:h},1000,'linear',function(){ 
        d1 = true; 
        if (d1 && d2) { 
            $div.next().after($div); 
            c.removeClass('rel').attr('style',''); 
            updatePos($div); 
        } 
    }); 
    $div.next().animate({top:(-1 * h)},1000,'linear',function(){ 
        d2 = true; 
        if (d1 && d2) { 
            $div.next().after($div); 
            c.removeClass('rel').attr('style',''); 
            updatePos($div); 
        } 
    }); 
} 
function sendUp($div){ 
    //Prettily Animated Swap of this div with it's previous sibling 
    var h = $div.prev().height(), 
        d1 = false, 
        d2 = false, 
        c = $div.add($div.prev()).addClass('rel'); 
    $div.animate({top:(-1 * h)},1000,'linear',function(){ 
        d1 = true; 
        if (d1 && d2) { 
            $div.after($div.prev()); 
            c.removeClass('rel').attr('style',''); 
            updatePos($div); 
        } 
    }); 
    $div.prev().animate({top:h},1000,'linear',function(){ 
        d2 = true; 
        if (d1 && d2) { 
            $div.after($div.prev()); 
            c.removeClass('rel').attr('style',''); 
            updatePos($div); 
        } 
    }); 
} 
function updatePos($div){ 
    var mV = getVN($div), pV, nV; 
    if ($div.prev('.pictureinthread').length) { 
        pV = getVN($div.prev('.pictureinthread')); 
        if (pV < mV) return sendUp($div); 
    } 
    if ($div.next('.pictureinthread').length) { 
        nV = getVN($div.next('.pictureinthread')); 
        if (nV > mV) return sendDown($div); 
    } 
    return true; 
}