如何使用jQuery将指定相邻label、input、span包裹进新建div容器

直接在原有元素选择逻辑的基础上，追加选中input紧邻的下一个span校验元素，再统一执行包裹操作即可，全程不会改动其他无关DOM元素。
核心实现代码：

// 定位目标input元素
var $input = $('.form-control');
// 同时选中三个目标元素：input本身、input前紧邻的label、input后紧邻的span
$input.add($input.prev('label')).add($input.next('span'))
  .wrapAll('<div class="form-group"/>');

• $input.next('span') 只会匹配class为form-control的input后面紧挨着的第一个span元素，不会误选页面其他位置的span
• jQuery的add()方法会把匹配到的元素追加到当前操作的元素集合中，最终集合刚好是需要包裹的三个相邻元素
• wrapAll() 仅会对当前集合内的元素做包裹操作，集合外的隐藏元素、其他表单元素完全不受影响，符合约束要求

如果页面存在多个同结构的form-control，需要每个控件和对应的label、span单独包裹为独立的form-group，可以使用遍历写法，避免把所有元素包到同一个div中：

$('.form-control').each(function () {
  const $currentInput = $(this);
  $currentInput
    .add($currentInput.prev('label'))
    .add($currentInput.next('span'))
    .wrapAll('<div class="form-group"/>');
});

执行代码后生成的DOM结构和预期完全一致：

<div class="form-group">
   <label for="" class="">First name</label>
   <input id="fxb_8f3aee" class="form-control" type="text" value="" maxlength="255" placeholder="">
   <span class="field-validation-valid" data-valmsg-replace="true"></span>
</div>

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