如何将输入元素及其标签包装到 div 中并将其放在其父元素之后？

Question

我正在编写一个带有 ImageField 的 Django 表单，默认情况下，它有一个 ClearableFileInput 小部件，如果已选中，它会插入一个额外的复选框以清除文件。

我正在使用 Materialize (http://materializecss.com/forms.html) 实现表单，通过它，文件 <input> 被包装在 div 中，类为 "btn"。但是，如果文件已经上传，额外的“清除”复选框也会出现在按钮内，而我想把它放在外面。

到目前为止，我已经尝试在所选元素上调用wrapAll()，然后按照jQuery move node out of its parent 中描述的方法：

    $("input[id*='-clear_id']").add("label[for*='-clear_id']").wrapAll("<div />").each(function() {
      $(this).parent().after(this);
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">  
  
  <div class="row">
    <div class="file-field input-field col s12">
      <label class="active" for="id_headshot">Headshot</label>
      <div class="btn">
        <span>File</span>
        Currently: <a href="https://lucy-dev2.s3.amazonaws.com/uploads/IMG_3515.png">IMG_3515.png</a>
<input type="checkbox" name="headshot-clear" id="headshot-clear_id" />
<label for="headshot-clear_id">Clear</label><br />
Change:
<input type="file" name="headshot" id="id_headshot" />
        
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text">
      </div>
    </div>
  </div>

但是，我得到的是父元素后面的空 div 元素，然后是选定的 input 和 label 元素：

如何让input 和label 首先被包裹在div 中，然后将div 移动到其父div 之后？

Answer 1

给 wrap 一个类，使其更易于处理，然后使用该新类作为具有 insertAfter() 方法的选择器。

演示

$(":checkbox, :checkbox + label").wrapAll("<div class='wrap'></div>");   

$('.wrap').insertAfter('.btn');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">  
  
  <div class="row">
    <div class="file-field input-field col s12">
      <label class="active" for="id_headshot">Headshot</label>
      <div class="btn">
        <span>File</span>
        Currently: <a href="https://lucy-dev2.s3.amazonaws.com/uploads/IMG_3515.png">IMG_3515.png</a>
<input type="checkbox" name="headshot-clear" id="headshot-clear_id" />
<label for="headshot-clear_id">Clear</label><br />
Change:
<input type="file" name="headshot" id="id_headshot" />
        
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text">
      </div>
    </div>
  </div>