javascript - 如何将输入元素及其标签包装到一个 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在其 parent 之后移动 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>