如何使用jQuery将details标签内指定元素包裹到容器中？

解决方案代码 #

// 等待页面DOM加载完成后执行
$(document).ready(function() {
  // 定位到目标details容器
  const $detailsContainer = $('.js-form-wrapper');
  // 筛选出需要被包裹的两个元素
  const $elementsToWrap = $detailsContainer.find('table.responsive, .js-form-type-managed-file');
  
  // 用带有my-wrapper类的div包裹这两个元素
  $elementsToWrap.wrapAll('<div class="my-wrapper"></div>');
});

代码说明 #

1. DOM加载判断：用$(document).ready()确保代码在页面所有DOM元素加载完成后执行，避免因元素未加载导致的选择器失效问题。
2. 精准定位：先找到父容器.js-form-wrapper，再在其内部筛选目标元素，避免误操作页面其他同名元素。
3. 包裹操作：使用jQuery的wrapAll()方法，一次性将选中的两个元素包裹进新创建的<div class="my-wrapper"></div>中，实现你需要的结构变更。

严谨性优化（可选） #

如果需要确保目标元素存在再执行包裹操作，可添加存在性判断，避免无效执行：

$(document).ready(function() {
  const $detailsContainer = $('.js-form-wrapper');
  if ($detailsContainer.length) {
    const $elementsToWrap = $detailsContainer.find('table.responsive, .js-form-type-managed-file');
    // 确保两个目标元素都存在时再执行包裹
    if ($elementsToWrap.length === 2) {
      $elementsToWrap.wrapAll('<div class="my-wrapper"></div>');
    }
  }
});

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