如何通过jQuery链式调用修改p元素文本且不破坏原有动画？

问题原因 #

replaceWith()会完全替换掉目标DOM元素，原<p>节点会被移除，链式调用的上下文会变成新插入的内容（如果有的话），导致后续针对原<p>的动画无法继续执行。

解决方案 #

不要用replaceWith()，改用text()方法修改元素的文本内容——这个方法只会更新元素内部的文本，不会替换或移除原DOM节点，因此链式调用的上下文始终是原来的<p>元素，后续动画可以正常执行。

示例代码

假设原代码如下：

$('button:contains("Start Chaining")').click(function() {
  $('p')
    .animate({width: '100%'})
    .animate({fontSize: '35px'})
    .animate({borderWidth: 30});
});

修改后（直接插入链式调用）：

$('button:contains("Start Chaining")').click(function() {
  $('p')
    .animate({width: '100%'})
    .text('Congratulations') // 修改文本，不破坏链式
    .animate({fontSize: '35px'})
    .animate({borderWidth: 30});
});

如果需要在某段动画完成后再修改文本（比如第一个动画结束后），可以把text()放在动画的回调函数里：

$('button:contains("Start Chaining")').click(function() {
  $('p')
    .animate({width: '100%'}, function() {
      // 第一个动画完成后修改文本
      $(this).text('Congratulations');
    })
    .animate({fontSize: '35px'})
    .animate({borderWidth: 30});
});

补充说明 #

• 如果需要插入HTML内容，也可以用html('Congratulations')，效果和text()类似，同样不会替换原元素。
• 核心逻辑就是：不要替换DOM节点，只修改节点的内容，这样链式调用的上下文才会保持一致。

内容的提问来源于stack exchange，提问作者Thulitha Gurusinghe