WordPress环境下使用jQuery .wrapAll()包裹内容时Lottie-player标签被意外移除的技术问题

我之前在WordPress项目里碰到过几乎一模一样的问题——用jQuery把h2到下一个h2的内容包进section时，只要引入Lottie交互脚本，<lottie-player>就会莫名其妙从DOM里消失。纯HTML环境没问题，说明是WordPress的特殊环境导致的，大概率是脚本加载顺序或者WP自带的内容过滤机制在搞鬼。下面给你几个经过验证的解决方案：

1. 先做DOM包裹，再加载Lottie脚本 #

Lottie的交互脚本会在页面加载完成后自动扫描并初始化所有<lottie-player>元素，如果你的jQuery包裹操作在这之后执行，移动元素会让Lottie脚本误以为这些元素是无效的，直接给移除了。

调整代码顺序，把包裹逻辑放在Lottie脚本之前执行：

<article>
  <h2>Lottie Files</h2>
  <div class='lottie-wrapper'>
    <lottie-player src='' background="transparent" speed="1"></lottie-player>
  </div>
</article>

<!-- 先执行包裹操作 -->
<script>
jQuery(document).ready(function($) {
  $('article h2').each(function () {
    $(this).nextUntil('h2').addBack().wrapAll('<section />');
  });
});
</script>

<!-- 再加载Lottie交互脚本 -->
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>

这个方法是最容易实现的，我当时就是靠这个解决了问题。

2. 用原生JS写包裹逻辑，避开jQuery的事件触发 #

有时候jQuery的DOM操作会触发一些额外的DOM事件，可能被Lottie脚本捕获到，进而触发元素移除。换成原生JS来实现包裹，能减少这种意外：

document.addEventListener('DOMContentLoaded', function() {
  const article = document.querySelector('article');
  const headings = article.querySelectorAll('h2');
  
  headings.forEach((heading, index) => {
    const section = document.createElement('section');
    let currentElement = heading;
    // 确定当前区块的结束位置：下一个h2或者文章末尾
    const endMarker = headings[index + 1] || article.lastElementChild;

    // 把当前h2到结束标记的元素都移到section里
    while (currentElement && currentElement !== endMarker.nextElementSibling) {
      const nextEl = currentElement.nextElementSibling;
      section.appendChild(currentElement);
      currentElement = nextEl;
    }

    // 把section插回原位置
    article.insertBefore(section, headings[index + 1] || null);
  });
});

3. 禁用WordPress对Lottie内容的自动过滤 #

WordPress的wpautop函数会自动给内容加p标签，有时候还会对它识别不了的标签（比如<lottie-player>）进行清理，尤其是DOM结构变动后更容易触发。可以在主题的functions.php里加一段代码，让WP别碰包含Lottie的内容：

function disable_wpautop_for_lottie($content) {
  // 检测内容里有没有lottie-player标签
  if (strpos($content, '<lottie-player') !== false) {
    remove_filter('the_content', 'wpautop');
    remove_filter('the_excerpt', 'wpautop');
  }
  return $content;
}
add_filter('the_content', 'disable_wpautop_for_lottie', 0);

注意：这个方法会关掉整个文章内容的自动排版，如果只想针对特定区域，可以再细化判断逻辑，比如检查是否在某个特定的div里。

4. 包裹完成后重新初始化Lottie #

如果上面的方法都不管用，那就手动在包裹操作完成后重新初始化Lottie，强制它识别新位置的元素：

jQuery(document).ready(function($) {
  // 先执行包裹
  $('article h2').each(function () {
    $(this).nextUntil('h2').addBack().wrapAll('<section />');
  });
  
  // 重新初始化Lottie交互
  if (window.LottieInteractivity) {
    window.LottieInteractivity.create({
      player: ".lottie-wrapper lottie-player", // 你的player选择器，根据实际情况调整
      mode: "scroll", // 换成你需要的交互模式
      actions: [
        {
          visibility: [0, 1],
          type: "loop",
        }
      ]
    });
  }
});

建议先试第一种方案，这是最常见的原因，也是成本最低的解决方式。如果还不行，再依次尝试其他方法。

内容的提问来源于stack exchange，提问作者Álvaro