jQuery .append()创建两个img元素而非一个的解决方法

原代码重复生成2个img的核心原因是选择器写的是$('video source[src=""]')，示例代码里单个video标签下包含2个src为空的source标签，each会匹配到2个元素触发2次循环，每次循环都执行一次图片插入逻辑，自然会生成重复的img元素。同时原逻辑全部写死固定id，只能适配单个视频模块，无法覆盖页面所有video标签。

调整遍历和判断逻辑，核心改动点：

• 遍历维度从空source标签改为所有video标签，每个视频只做一次有效性判断
• 新增有效源校验规则：同时检查video自身src、所有子source标签的src，只要存在非空的有效地址就不展示占位图
• 移除固定id绑定，通过相对DOM查找匹配当前视频对应的容器，插入前先清除容器内已存在的占位图，既避免重复插入，也支持页面任意数量的video标签适配
• 占位图改用类选择器控制样式，避免多实例下id重复的合规性问题

JS逻辑 #

$(document).ready(function() {
  // 遍历页面下所有video标签
  $('video').each(function() {
    const $currentVideo = $(this);
    // 校验当前视频是否存在有效播放源
    const hasValidSource = !!$currentVideo.attr('src')?.trim() || 
      $currentVideo.find('source').toArray().some(source => !!$(source).attr('src')?.trim());

    if (!hasValidSource) {
      // 查找当前视频对应的外层容器
      const $coverBox = $currentVideo.closest('.video-cover');
      // 提前移除已存在的占位图，避免重复插入
      $coverBox.find('.video-placeholder').remove();
      // 插入占位图
      $coverBox.append('<img class="video-placeholder" src="https://uploads-ssl.webflow.com/6012ac684e954c060b8219fb/609bc7bbab390bac021906a5_ELEMENTE-04.svg" alt="视频占位图">');
    }
  });
});

CSS样式 #

/* 视频容器加相对定位，方便占位图居中覆盖 */
.video-cover {
  position: relative;
}
/* 占位图样式 */
.video-placeholder {
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

HTML结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-wrapper">
  <div class="video-cover">
    <video width="100%" muted playsinline controls data-object-fit="contain">
      <source src="" type="video/mp4">
      <source src="" type="video/mp4">
      您的浏览器不支持HTML5 video标签
    </video>  
  </div>
</div>
<!-- 可任意新增多个video模块，逻辑会自动适配，不会出现重复插入占位图的问题 -->

• 单个video下存在多个空src的source标签时，只会插入1张占位图
• 页面新增任意数量的video标签，只要无有效播放源就会自动在对应位置插入占位图，不会出现跨容器错乱
• 只要video存在任意一个非空的有效视频源，就不会插入占位图，不影响正常视频播放

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