如何实现main-video-wrap与video-list容器完整互换及ID属性修改

已实现带画中画模式的视频布局，点击视频切换背景的功能正常，但需要将main-video整个容器（包含卡片图像、名称、下拉菜单等所有元素）与video-list内的videoWrap容器互换，同时修改对应容器的ID属性。目前仅能切换视频元素，求用JavaScript/jQuery实现完整容器的移动与互换。

核心思路 #

直接互换两个容器的位置，同时交换它们的类名和ID，无需单独处理内部视频元素：

• 点击列表容器时，定位主容器与当前点击容器
• 互换两者在DOM中的位置
• 交换类名以保证样式正常生效
• 交换ID以维持容器标识的正确性

前置修正：修复HTML重复ID问题 #

原HTML中存在大量重复ID（如多个cardvideo_remotestream、dropDown），ID必须唯一，否则会导致选择器失效。需将重复ID改为类名，列表容器ID改为唯一值：

<!-- 主容器 -->
<div class="main-video mainVideoWrap" id="cardvideo_localstream">
  <!-- 内部元素保留，仅将重复ID改为类名 -->
</div>

<!-- 列表容器示例（修改后） -->
<div class="position-relative videoWrap" id="cardvideo_remotestream_1">
  <video src="https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1" muted autoplay loop type="video/mp4"></video>
  <div class="card-img-overlay p-0 imgCard">
    <div>
      <span class="text-capitalize user-name">
        <i class="icon-user pe-1"></i>videolist1
      </span>
      <div class="dropDown dropdown float-end">
        <button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" class="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
          <i class="icon-dot"></i>
        </button>
        <ul class="drop dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
          <!-- 下拉项内容不变 -->
        </ul>
      </div>
    </div>
  </div>
</div>

最终JavaScript代码 #

var initVideoSwapping = function() {
    // 检查必要元素是否存在
    if ($('.video-list .videoWrap').length > 0 && $('.main-video').length > 0) {
        $('.video-list .videoWrap').on('click', function() {
            var $clickedWrap = $(this);
            var $mainWrap = $('.main-video');
            
            // 保存容器位置信息
            var $mainParent = $mainWrap.parent();
            var $clickedNext = $clickedWrap.next();
            
            // 互换容器位置
            $mainWrap.insertBefore($clickedNext.length > 0 ? $clickedNext : $clickedWrap.parent());
            $clickedWrap.prependTo($mainParent);
            
            // 交换类名，保证样式正确
            $mainWrap.toggleClass('main-video videoWrap');
            $clickedWrap.toggleClass('main-video videoWrap');
            
            // 交换ID，维持容器标识
            var mainId = $mainWrap.attr('id');
            var clickedId = $clickedWrap.attr('id');
            
            $mainWrap.attr('id', clickedId);
            $clickedWrap.attr('id', mainId);
            
            // 修正主视频的ID与自动播放状态
            var $newMainVideo = $clickedWrap.find('video');
            var $newListVideo = $mainWrap.find('video');
            
            $newMainVideo.attr('id', 'video-main').prop('autoplay', true);
            $newListVideo.attr('id', '').prop('autoplay', true);
            
            // 重新初始化Bootstrap下拉菜单（如果互换后失效）
            $('.dropdown-toggle').dropdown();
        });
    }
}

$(function() {
    initVideoSwapping();
});

代码说明 #

• 容器位置互换：使用insertBefore和prependTo直接移动DOM节点，保留内部元素的事件与状态
• 类名交换：通过toggleClass切换main-video和videoWrap类，确保样式规则正确应用到互换后的容器
• ID交换：保存原ID后互相赋值，维持容器的唯一标识
• 视频处理：保证互换后的主视频仍保留video-mainID和自动播放状态
• 下拉菜单修复：互换后重新初始化Bootstrap下拉组件，避免交互失效

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