jQuery在执行前等待replaceWith完成

Question

我用replaceWith 批量替换了许多div 中的html。替换后，我使用 jTruncate 截断文本。但是它不起作用，因为在执行时，replaceWith 没有完成。

我尝试了回调技巧 (How do I extend jQuery's replaceWith function to accept a callback function?)，但没有奏效。

有什么想法吗？

$(".hotel_info").each(function () {
    var div;
    div = $(this);
    div.replaceWith(data);
    truncInfo(div);
});

function truncInfo(div) {
    div.jTruncate({
        length: 100,
        minTrail: 100,
        moreText: '[more...]',
        lessText: '[less...]',
        ellipsisText: '...',
        moreAni: 'fast',
        lessAni: 'fast'
    });
}

Answer 1

好的，感谢这篇文章找到了解决方案：jQuery replaceWith find new element

似乎在替换为之后，该对象从DOM中删除了，因此创建了一个新对象。所以，我不得不像这样更改代码：

$(".hotel_info").each(function () {
  var div;
  var div2;
  div = $(this);
  div2 = div.replaceWithPush(data);
  truncInfo(div2);
});

$.fn.replaceWithPush = function (a) {
  var $a = $(a);
  this.replaceWith($a);
  return $a;
};

感谢大家的宝贵时间！

Answer 2

与 .find() 等 jQuery 函数不同，.replaceWith() 不会更新元素集（构成 jQuery 对象本身）。

这意味着在删除后，您会留下旧的引用；这里的诀窍是保留替换元素的参考。

不过，在您的情况下，您可以采取不同的做法：

$(".hotel_info").replaceWith(function () {
    return truncInfo(this);
});

一定要让truncInfo返回调用jTruncate()的结果：

function truncInfo(div) 
{
    return div.jTruncate({
        length: 100,
        minTrail: 100,
        moreText: '[more...]',
        lessText: '[less...]',
        ellipsisText: '...',
        moreAni: 'fast',
        lessAni: 'fast'
    });
}

Answer 3

要尝试异步和同步部分，您可以使用 setTimeout 函数。

setTimeout(function(){truncInfo(div)}, 3000);

这将在调用 truncInfo 函数之前等待 3 秒。

3 秒足以让 replaceWith 函数完成其处理。您可以根据自己的选择延长时间并检查。

这不是一种理想的做法，但在某些情况下可能会奏效。

更多setTimeout详情请查看http://www.w3schools.com/jsref/met_win_settimeout.asp

希望这会有所帮助。